CSS 魔法：学海无涯，而吾生有涯

非商业转载请注明做译者、出处，并保留本文的原始连接：http://www.ituring.com.cn/article/216538

图灵访谈很是有幸能邀请到“魔法哥”，进行一期专访。咱们都知道您是国内知名的 CSS 专家，是什么样的 “CSS情结” 使得您愿意将 “CSS魔法” 做为本身的别名？

你们好，很荣幸接受图灵的专访。我叫 “CSS魔法”，熟悉个人朋友都叫我 “魔法哥”。 这个问题问得好，瞬间把个人思绪拉回八年以前——那时我刚开始系统地学习前端知识。当时为了找一份前端工做，我把市面上全部的 CSS 书籍所有买来，所有啃光，迅速且系统地掌握了 CSS 的基础知识。

在这一堆书里，有一套上下册教程叫做《Eric Meyer谈CSS》（是由图灵引进的哦）。我记得很清楚，书里有这么一段话：“在准备好语义化的结构以后，咱们再给它施加一点儿 CSS 魔法……” 我当时感受这句话正好契合 CSS 带给个人体验！

我很喜欢 CSS 这门技术，它优雅、神奇、充满魔力，短短几行代码就可让咱们的网页脱胎换骨、面目一新。因而从那时起，我就开始使用 “CSS魔法” 这个网名了。以这个名字注册了微博，后来还建立了 “CSS魔法” 微信公众号，分享本身在前端领域的学习经验；在为图灵翻译《CSS揭秘》一书时，也很天然地以此为笔名了。

说到 Eric Meyer，他仍是《CSS权威指南》的做者，也是个人偶像。从偶像那里得来一个名字，很荣幸；并且这其中也有图灵的功劳，也是缘份。 请简单介绍一下您在百姓网的工做内容吧！

我目前在百姓网担任手机站的前端架构师。比较尴尬的是，“前端架构师” 这个头衔常常遭遇质疑：“前端竟然也须要架构？” 因此我也趁这个机会阐述一下，我理解中的前端架构到是什么。

其实无论是前端仍是后端，任何一项严肃的、长期的、大规模的工程，都是须要有人来设计架构的。

百姓网的前端架构目标很明确：随着业务规模的扩张和团队的壮大，整个网站系统的复杂度也随之迅速上升；如何化繁为简、帮助业务工程师高效高质完成开发任务，这正是前端架构师的职责和挑战所在。

所以，简单归纳一下，我在百姓网所作前端架构工做包括：

• 编写工具库和 UI 框架，并提供文档，提高业务开发效率

• 优化开发流程，提高业务工程师的开发体验

• 制定各种开发规范，并经过工具来确保规范的执行

• 调研新技术、新工具，并适时应用推广

• 组织按期的技术交流会和不按期的技术分享

• ……

看来“魔法哥”要全面把握开发流程，规划框架，制定规范。那平时还须要写代码吗？

其实，终年重构代码也都是分内事，偶尔还须要投身业务开发。毕竟架构层做为业务层的坚实后盾，松懈不得啊！

您以为哪些 CSS 知识是必须掌握的？

对一个专业的 CSS 开发者来讲，首先，CSS2 的核心知识必须彻底掌握。以《CSS权威指南》（第三版）为例，除了 “声音样式” 以外，这本书的全部内容都是应该透彻理解的。即便记不住某些冷僻属性的名称与行为，也须要知道在哪里能够快速查阅。

接下来，关于 CSS3，不少同窗都问过我这样一个问题：“魔法哥，如今浏览器都支持 CSS3 了，我跳过 CSS2 直接学 CSS3 能够吗？”

在回答这个问题以前，咱们须要先搞清楚 “CSS3” 究竟是什么。读过《CSS揭秘》这本书的同窗应该都很清楚了，“CSS3” 是一个俗称，并非 W3C 的官方术语。基本上它是CSS2 以后更新或新增的 CSS 规范模块的合称。

实际上，CSS3 相对于 CSS2 并非相似软件版本更替那样的升级。CSS2 的全称是 “CSS Level 2”，后续的 CSS 规范并非彻底以替代品的形态出现的，某些 Level3 的 CSS 规范模块（或新增的规范模块）每每是基于 CSS2 来扩展的。

所以，对于 CSS 学习者来讲，若是买了一本只讲 CSS3 新增内容的教程或参考书，那还须要搭配 CSS2 的书来看。事实上，因为篇幅所限，市面上绝大部分以 “CSS3” 为卖点的图书确实都不会重复讲解 CSS2 的内容。看到这里，相信上面的问题在你们心中已经得出答案了吧。

我本身的学习路径是这样的：经过《CSS权威指南》和《精通CSS》等 CSS2 时代的经典教程来打好 CSS2 的基础（由于 CSS2 已经彻底稳定了）；对后续新技术和新规范的了解和掌握，一般求助于 MDN 等在线资源（由于变化至关快）。若是新入门的同窗面对庞杂的 CSS 体系感受无从下手，不妨参考这条路径。

有图灵社区网友提问：您在工做中经常使用的 CSS 实用技巧有哪些？

首先，我会绝不犹豫地推荐你们使用 CSS 预处理器。因为 CSS 并非编程语言，并不具有抽象能力，当网站的规模发展到必定程度以后，原生 CSS 很难解决抽象与复用的问题。而预处理器则正好弥补了 CSS 在这方面的不足。

即便你不打算学习预处理器的特有语法，甚至还有些排斥，那也不妨尝试利用它的模块机制来拆分和组织代码。因为预处理器大多兼容 CSS 原生语法，所以你能够保持原来写代码的习惯，仅利用预处理器在模块化方面的功能。

对于多人合做的团队来讲，经过模块来拆分代码尤其重要。虽然引入预处理器会要求你在工做流中加入构建环节，但我认为这个成本是彻底值得的。

接下来，想跟你们分享的经验就是：作好 CSS 代码的 “分层”。我设计的 CSS 架构一般都会由 “Normalize + Reset → 通用基础样式 → UI 组件 → 页面通用的布局框架 → 单个页面的布局和样式” 这几个层级构成，越往左越靠近架构，越往右越靠近业务。

划好层级并把代码写到正确的层级去，能够带来不少好处：在团队分工上，能够把不一样层级的代码交给不一样的人来开发和维护，至关于关注点分离；从架构角度来看，也能够实现 “控制复杂度” 这一重要目的。

还有就是善用工具。好比经过 Lint 程序来保障代码规范的执行，经过构建工具来让重复劳动尽量自动化，经过 Autoprefixer 这样的工具来加工或生成代码，等等。俗话说，磨刀不误砍柴工，多看多听多试，用开放的心态去了解和尝试新工具，每每会有不错的收获。

若是这位网友想问的是 “有哪些实用的 CSS 特性”，那我以为至少要提一下 Flexbox。它是 CSS3 引入的更强大、更易用的布局方式，并且咱们在移动端已经能够安全地使用 Flexbox 的基础特性了。其它的特性，好比高级选择符、渐变、动画等高级特性，也很是有价值，我在编写 UI 框架时都有实际应用。

此外，你们可能还想了解在编写 CSS 时须要掌握的原则和思路。这里我会推荐《CSS揭秘》这本书中的“CSS 编码技巧”一节。我一直想写篇文章来说述本身多年积累的 CSS 经验，但一直苦于找不到合适的切入点，总怕挂一漏万。而当我读到这一节时终于释然——原来已经有人帮我作了这件事情！随后我也将它亲手翻译了出来，也算了却了一桩心事。

前端领域的技术更新很是快，经常是一门技术还没学明白，另外一门技术又火了，你是如何取舍的呢？

确实，近些年前端领域的新技术、新工具、以及新的实践方式都层出不穷，稍不留神就会有落伍的感受。而每一个人精力都是有限的，面对这样的局面，不免会有一种疲于奔命的压迫感。

我本身的应对方式是抓住核心，放弃本身很难精通的、一时用不到的、或者对当下想作的事情价值不大的技术方向。好比一路以来，我放弃了富媒体方向的 Flash，放弃了图形与游戏方向的 Canvas 和 WebGL，放弃了单页应用方向的 MV*，放弃了语言方向的 FP ，等等。

固然这些 “放弃” 都是战略性的，而不是永久性的。毕竟精力有限，不可能面面俱到。不过，一旦某个方向变成本身必须攻克的战略要地，那我也必然会义无反顾跃入新坑。

除了在技术范畴内做取舍，我还会把一部分精力放在 “人” 身上——就是写代码的这群人。我的英雄的时代一去不复返了，单打独斗能力再强，也难成气候。所以，帮助身边的小伙伴快速成长，打造一支梯队完备、技能互补的前端开发团队，每每更具现实意义。有些时候，这也能够成为一种 “突破瓶颈” 的解决方案——每当团队里的小伙伴攻克了某项新技术时，我均可以宽慰本身：我不会，不要紧，有小伙伴能够顶上！

有图灵社区网友提问：CSS 与它的小伙伴儿 JavaScript 的关系是怎样的？有什么共同点和差别？

哇噢，这个问题彻底是面试题的既视感啊！好的，我来好好回答一下，重温被面试的感受。

根据 Web 标准的 “分离” 原则，网页界面由三层构成：结构层、表现层、行为层。这三者在技术上分别由 HTML、CSS、JS 来实现。你们都知道有句话叫 “术业有专攻”，在网页上也是同样，不一样的层应该由不一样的技术来实现。

在近些年，CSS 的能力获得了很多提高，好比 :hover 伪类的加强以及 :checked、:target 等新伪类的出现，令本来只能由 JS 实现的交互功能也能够用 CSS 来实现了。这意味着，在某些场景下，这二者的功能有重叠的地方。

不过从原理上来讲，CSS 只具有修改渲染树的能力，没法修改 DOM 结构（“渲染树” 是指 DOM 树在应用样式以后产生的、用于渲染网页界面的数据模型）。CSS 能够经过 display、visibility、opacity 等属性来控制元素的显隐，但没法把元素从 DOM 树上删除或移动，也没法建立新的 DOM 元素。这是 CSS 的能力边界。

虽然这二者的功能有一些重叠，但它们并非互斥的。JS 和 CSS 是能够合做的，并且咱们应该擅用这种合做关系，发挥各自所长。举例来讲，CSS 的声明式特性比较简单易懂，在管理样式方面更加易于书写和维护。所以，在实现某些动态效果的时候，咱们能够把不一样状态的样式以类的形式写在 CSS 中，而后让 JS 经过切换元素的类来实现样式的变化。

有图灵社区网友提问：鉴于 CSS 擅长处理复杂布局和绚丽的视觉效果，眼下 Web 开发者能够跳过 JavaScript，走 “UI + 后端” 的路线么？

简单地说：不可能。

首先说一下 “UI” 这个概念。UI 并非静态的布局和样式，不是设计师发给咱们的 PSD 图像。UI 是用户界面，它的核心是交互，而交互须要由 JS 来实现。交互以及交互传达出的用户体验，才是眼下前端的核心价值。

接下来，咱们回到实际的开发场景中来看待这个问题。若是是团队做战，那么团队中的个体固然能够有所侧重和取舍。在整个技术栈中，本身放下的某个环节只要有小伙伴能够顶上，那就没啥大问题。不过若是是打算通吃先后端的全栈工程师给本身作职业规划，那么 JS 是绕不开的。

其实在图灵社区里，我跟这位提问的网友已经有过交流。他回避 JS 的缘由主要在于入门时被网上的低劣教程所误导，对 JS 留下了错误的第一印象，进而心生抵触。

这位网友的经历让我十分可惜，同时也不禁地深深感叹：咱们在学习一门技术时，选择规范、系统的学习途径是多么重要啊！因此这里要再一次郑重推荐图灵的程序设计丛书，魔法哥信赖之选！

有图灵社区网友提问：您是否赞同将前人留下的技巧直接运用到本身的项目中？是否须要 “知其然、知其因此然” 的研究精神？

这要看你给本身的定位是什么。我认为技术工做者大体能够分为两类。第一类人单纯被技术自己所吸引——相信咱们都有感触，技术自己就有一种迷人的美！而第二类人把技术做为手段，他们学习技术的最终目的是经过技术来推进一些事。这两种技术人都有各自合理的出发点，并无孰对孰错之分。

那么，若是你是第一类人，那你对本身的规划和定位必然是某个领域的技术专家。全部有价值的技术都应该被你吃透，并且相信你本身也会有源源不断的强烈兴趣，去把这些技术掰开了、揉碎了研究到极致。

而若是你是第二类人，那么 “知其因此然” 就不是必须的了。尤为是在团队中，你能够把 “知其因此然” 的任务交给技术专家，把有限的精力投入到更适合本身的地方去。

回想本身一路以来的经历，可否给前端初学者分享一些学习经验？

我这些年写博客始终以初中级开发者做为主要受众，建立的“CSS魔法” 微信公众号也仍然关注前端初学者群体。所以能够聊的经验有不少，最重要的应该是——“系统学习、打好基础”，由于真正基础的东西是不会过期的。

我也曾模仿别人网站的代码，或是在网上收集别人发表的各类技巧，而后把找来的一句句代码拼凑在一块儿。虽然这种方法一般也能够生效，但我彻底不知其因此然，那些代码片段对我来讲无异于外星人的咒语。因为无人指导，没法系统地学习知识，当时的状态就像是在黑暗的迷宫中摸索同样。

当时在书店里能找到的相关书籍也无非是一些迎合国人 “短平快” 心理的快餐书，什么“现学现用”“代码速查 300 例” 之类。我是一个喜欢打破沙锅问到底的人，这些没头没尾的所谓技巧显然没法知足个人好奇心，失望而归。

几年以后，以图灵为表明的科技图书公司开始引进国外的经典教程和参考书。当《精通CSS》《JavaScript 高级程序设计》这些著做捧到我手上时，你能够想像我当时有多么欣喜若狂。

在疯狂求知的过程当中，我发现，前些年我在网上费尽辛苦收集到的珍稀黑魔法，其实在书里都有着更加全面和系统的讲解。当我稳固地掌握了 HTML、CSS、JS 的基础知识以后，我惊讶地发现，原先那些看似神奇、背都背不下来的外星咒语，早已融入个人血液，成为信手拈来的本能。

如今的孩子们是幸福的，大家生活在一个信息通畅、资源富足的时代。所以不须要眼巴巴地乞求 “大神们” 施舍只言片语的秘技，只要多读几页书，你也能够成为别人眼中的大神！

十分感谢魔法哥花费宝贵的时间接受图灵的专访，深刻浅出，鞭辟入里！

我也很高兴今天跟你们聊了这么多，咱们下次再见!

---

更多精彩，加入图灵访谈微信！