Page 38 - css揭秘

CSS 编码技巧

尽量减少代码重复

在软件开发中，保持代码的 DRY 和可维护性是最大的挑战之一，而这
句话对 CSS 也是适用的。在实践中，代码可维护性的最大要素是尽量减少
改动时要编辑的地方。举例来说，如果在放大一个按钮时需要在一堆规则中
进行 10 处修改，那就很可能会漏改其中某处，当你在给别人善后时更是如
此。即使这些要修改的地方很明显，或者最终可以找齐它们，但你还是浪费
了时间，原本可以利用这些时间来做点更有意义的事情。

而且，这还不仅仅是后期修改的问题。灵活的 CSS 通常更容易扩展：
在写出基础样式之后，只用极少的代码就可以扩展出不同的变体，因为只需
图 1-4
覆盖一些变量就可以了。让我们来看一个例子。
在我们的示例中会一直用到这个
先来看看下面这段 CSS，它给按钮添加了一些效果（参见图 1-4）： 按钮

padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;

这段代码在可维护性方面存在一些问题，我们来一一修复。最软的杮子
1①
应该是跟字体尺寸相关的部分了。如果我们决定改变字号 （可能是为了生成
一个更大、更重要的按钮），就得同时调整行高，因为这两个属性都写成了
绝对值。更麻烦的是，行高并没有反映出它跟字号的关系，因此我们还得做
些算术，算出字号改变之后的行高该是多少。当某些值相互依赖时，应该把
它们的相互关系用代码表达出来。在这个例子中，行高是字号的 1.5 倍。因
此，把代码改成下面这样会更易维护：

font-size: 20px;
line-height: 1.5;

既然跨出了这一步，我们为什么还把字号定为绝对长度值呢？没错，绝
对值很容易掌控，但每当你想要修改它们的时候，它们都会回头反咬你一
口。比如说，如果我们决定把父级的字号加大，就不得不修改每一处使用绝 图 1-5
对值作为字体尺寸的样式。如果改用百分比或 em 单位就好多了： 只放大字体会破坏按钮的其他效
果（最突兀的就是圆角），因为它
① 在本书中，“字号”是对字体尺寸（font-size）的俗称。——译者注 们都被指定了一些绝对的长度值

CSS 编码技巧 7

඀ࠡ JOEC