Page 46 - css揭秘

„ 每次抽象都必然会带来更高的学习成本，每当有新人加入到我们的
代码库中，这个问题都会重演。他要么已经对我们选择的这门预处
理器“方言”很熟悉，要么得从头学。这意味着我们要么强制协作
者接受我们的选择，要么花费额外的时间来培训，而这两者都不是
我们想要的。
„ 另外，别忘了还有抽象泄漏法则：“所有重大的抽象机制在某种程度
上都存在泄漏的情况。”预处理器是由人类写出来的，就像所有由
人类写出来的大型程序一样，它们有它们自己的 bug。这些 bug 可
能会潜伏很久，因为我们很少会怀疑预处理器的某个 bug 才是我们
CSS 出错的幕后元凶。

除了上面列出的这些问题，预处理器还可能导致这种风险：网站开发者
可能会不自觉地“依赖”和“滥用”。因为在某些时候，预处理器并不必要。
比如在小型项目中；或者在未来，说不定预处理器最受欢迎的那些特性都被
加入了原生 CSS 中。很惊讶吗？没错，很多受预处理器启发的特性都已经
以各种方式融入到原生 CSS 中了。

„ 有一份关于（跟变量类似的）自定义属性的草案，叫作 CSS 自定义
属性暨层叠式变量（http://w3.org/TR/css-variables-1）。
„ CSS 值与单位（第三版）中的 calc() 函数，不仅在处理运算时非常
强大，而且已经得到了广泛的支持，当下可用。
„ CSS 颜色（第四版）（http://dev.w3.org/csswg/css-color）引入的 color()
函数会提供颜色运算方法。
„ 关于嵌套，CSS 工作组内部正在进行一些正式的讨论，甚至以前还
有过一份相关的草案（ED）。
请注意，这些原生特性通常比预处理器提供的版本要强大得多，因为它
1①
们是动态的 。举个例子，预处理器完全不知道如何完成 100% - 50px 这样
的计算，因为在页面真正被渲染之前，百分比值是无法解析的。但是，原生
CSS 的 calc() 在计算这样的表达式时没有任何压力。与此类似，下面这样
的变量玩法在预处理器中是不可能做到的：

ul { --accent-color: purple; }
ol { --accent-color: rebeccapurple; }
li { background: var(--accent-color); }

你看清楚这段代码的意图了吗？在有序列表中，列表项的背景色将是
rebeccapurple；但在无序列表中，列表项的背景色将是 purple。试
试用预处理器能否做到！当然，在这个例子中，我们可以直接使用后代选择
符，只不过这个例子的重点在于向你展示 CSS 的原生变量所具备的动态性。

① 不要忘了这样的原生 CSS 特性也可以通过脚本来操纵。比如说，你可以用 JS 来改变一个变
量的值。

CSS 编码技巧 15

඀ࠡ JOEC