Page 40 - css揭秘

font-size: 125%;
line-height: 1.5;

现在我们只要覆盖 background-color 属性，就可以得到不同颜色版本
的按钮了（参见图 1-7）：

button.cancel { 图 1-7
background-color: #c00;
} 只要改变背景色，就可以得到其
他颜色版本的按钮了
button.ok {
background-color: #6b0;
}

我们的按钮现在已经非常灵活了。不过，这个例子并没有涵盖所有能让
代码变得更 DRY 的方法。你会在下面几节中发现更多的技巧。

1. 代码易维护 vs. 代码量少

有时候，代码易维护和代码量少不可兼得。比如在上面的例子中，我们
最终采用的代码甚至比一开始的版本略长。来看看下面的代码片断，我们要
为一个元素添加一道 10px 宽的边框，但左侧不加边框。

border-width: 10px 10px 10px 0;

只要这一条声明就可以搞定了，但如果日后要改动边框的宽度，你需要
同时改三个地方。如果把它拆成两条声明的话，改起来就容易多了，而且可
读性或许更好一些：

border-width: 10px;
border-left-width: 0;

2. currentColor

在 CSS 颜色（第三版）（http://w3.org/TR/css3-color）规范中，增加了
很多新的颜色关键字，比如 lightgoldenrodyellow 等，其实并不是很常
用。但是，我们还得到了一个特殊的颜色关键字 currentColor，它是从
SVG 那里借鉴来的。这个关键字并没有绑定到一个固定的颜色值，而是一
直被解析为 color。实际上，这个特性让它成为了 CSS 中有史以来的第一
1①
个变量 。虽然功能很有限，但它真的是个变量。
举个例子，假设我们想让所有的水平分割线（所有 <hr> 元素）自动与
文本的颜色保持一致。有了 currentColor 之后，我们只需要这样写：

① 可能有人会争论说 em 单位才是 CSS 中的第一个变量，因为它引用了 font-size 的值。其实
大多数百分比数值也扮演了类似的角色，只不过它们的工作方式不是很起眼。

CSS 编码技巧 9

඀ࠡ JOEC