图灵访谈 CSS魔法：学海无涯，而吾生有涯

[cssmagic]

图灵访谈 CSS魔法：学海无涯，而吾生有涯

本文由 “图灵访谈” 微信公众号约稿并首发，由 CSS魔法 撰稿。

图灵访谈非常有幸能邀请到 “魔法哥” 做一期专访。我们都知道您是国内知名的 CSS 专家，是什么样的 “CSS 情结” 使得您愿意将 “CSS魔法” 作为自己的别名？

大家好，很荣幸接受图灵的专访。我叫 “CSS魔法”，熟悉我的朋友都叫我 “魔法哥”。

这个问题问得好，瞬间把我的思绪拉回八年之前——那时我刚开始系统地学习前端知识。当时为了找一份前端工作，我把市面上所有的 CSS 书籍全部买来，全部啃光，迅速且系统地掌握了 CSS 的基础知识。

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

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

说到 Eric Meyer，他还是《CSS 权威指南》的作者，也是我的偶像。从偶像那里得来一个名字，很荣幸；而且这其中也有图灵的功劳，也是缘份。

请简单介绍一下您在百姓网的工作内容吧！

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

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

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

因此，简单概括一下，我在百姓网所做前端架构工作包括：

• 编写工具库和 UI 框架，并提供文档，提升业务开发效率。
• 优化开发流程，提升业务工程师的开发体验。
• 制定各类开发规范，并通过工具来确保规范的执行。
• 调研新技术、新工具，并适时应用推广。
• 组织定期的技术交流会和不定期的技术分享……

除此以外，长年重构代码也都是份内事，偶尔还需要投身业务开发。毕竟架构层作为业务层的坚实后盾，松懈不得啊！

您觉得哪些 CSS 知识是必须掌握的？

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

接下来，关于 CSS 3，很多同学都问过我这样一个问题：“魔法哥，现在浏览器都支持 CSS 3 了，我跳过 CSS 2 直接学 CSS 3 可以吗？”

在回答这个问题之前，我们需要先搞清楚 “CSS 3” 到底是什么。读过《CSS 揭秘》这本书的同学应该都很清楚了，“CSS 3” 是一个俗称，并不是 W3C 的官方术语。基本上它表示 CSS 2 之后更新或新增的 CSS 规范模块的合称。

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

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

我自己的学习路径是这样的：通过《CSS 权威指南》和《精通 CSS》等 CSS 2 时代的经典教程来打好 CSS 2 的基础（因为 CSS 2 已经完全稳定了）；对后续新技术和新规范的了解和掌握，通常求助于 MDN 等在线资源（因为变化相当快）。如果新入门的同学面对庞杂的 CSS 体系感觉无从下手，不妨参考这条路径。

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

首先，我会毫不犹豫地推荐大家使用 CSS 预处理器。由于 CSS 并不是编程语言，并不具备抽象能力，当网站的规模发展到一定程度之后，原生 CSS 很难解决抽象与复用的问题。而预处理器则正好弥补了 CSS 在这方面的不足。

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

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

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

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

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

如果这位网友想问的是 “有哪些实用的 CSS 特性”，那我觉得至少要提一下 Flexbox。它是 CSS 3 引入的更强大、更易用的布局方式，而且我们在移动端已经可以安全地使用 Flexbox 的基础特性了。其它的特性，比如高级选择符、渐变、动画等高级特性，也非常有价值，我在编写 CMUI 这个框架时都有实际应用。

此外，大家可能还想了解在编写 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 等属性来控制元素的显隐，但无法…………

……

……

---

完整文章已收录到 “CSS魔法” 微信公众号，扫码立即订阅：

---

© Creative Commons BY-NC-ND 4.0   |   我要订阅   |   我要打赏

[MiYogurt]

之前在IMOOC看了魔法哥的视频，特地去买了一本《CSS揭秘》，还没看完，今天特地上网搜了一下你的博客。

花了好几个小时，通读了你最近写的文章，感触挺大的，翻译的也很用心，感动！果然每个老司机的背后都有一段历程，特别是你说的俩种学习方式，以解决目的的，和以兴趣驱动的，突然发现自己好像俩种都是，有点尴尬。

还有你说的取舍，是的，取舍这个东西我觉得我一直做不好，所以我一直在不停的学啊学，感觉好多东西要学，根本学不过来，特别是实践方面，少很多，经常把自己的心灵搞的疲惫不堪。

特别是遇见一些难题的时候，身心疲惫，想着我可不可以放一放呢？想一想来自父母的期望，自我的期望....哎，不停的折磨自己。

每次看到新的技术就忍不住想要去试一试，不仅仅是在前端方面。

看了你翻译的g4，j3，w2感觉都挺不错，我有个疑问想要问一下魔法哥。

对于 张云龙 他们所讨论的 基于FIS的前端基础工程你怎么看？

为什么选择的是国外的webpack、gulp，而不是更符合国情的FIS？我一直在这2种之间彷徨。

感觉百姓网挺不错的，有的时候买一些二手电子设备，可以节省不少钱，嘿嘿。

最后，谢谢魔法哥的分享。

[cssmagic]

@MiYogurt
谢谢你的支持和肯定。

关于 FIS，其实我觉得挺好的，尤其在组件化开发方面，如果适用，百姓网未来很可能会尝试。

目前我们采用 Gulp 和 Webpack 有几方面的原因：首先，它们目前对我们来说是够用的；其次，有先入为主的因素，我们不会频繁更新工具链；第三，Gulp 和 Webpack 的用户还是更多一些，选用它们的风险更小。