CSS编码技巧

来自神作《CSS揭秘》，使自身的CSS知识升华，适合CSS有着不错基础的小伙伴，进阶时可以去读一读

尽量减少代码重复

在软件开发中，保持代码的DRY和可维护性是最大的挑战之一，而这句话对CSS也是适用的。在实践中，代码可维护性的最大要素是尽量减少改动时要编辑的地方
举例来说，我们在放大一个按钮时需要在一堆规则中进行10处修改，我们很可能漏掉某处
这不仅仅是后期修改的问题，灵活的CSS通常更容易拓展：在写出基础样式之后，只用极少的代码就可以拓展出不同的变体，因为只需要覆盖一些变量就可以了，我们来看一个例子。

button {
    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;
}

我们用css给一个按钮添加了一些效果

现在，我们要放到这个按钮，从最简单的开始，改变它的字体尺寸，我们怎么去高效关键地去更改呢？当某些值相互依赖时，应该把它们之间的相互关系用代码表示出来

font-size: 20px;
line-height: 1.5;//因为在这个代码中lh是fz的1.5倍

改成这种相互关系，更高效方便
在这个基础上，字号我们为什么还用20px这种方式表示呢？我们用百分比或者em单位会更好，因为我们再去修改它的时候，它不会回来反咬我们一口

font-size :125% ;//假设父级字号是16px
line-height : 1.5 ;

现在，我们改变父级的色号，按钮的尺寸就会随之改变，但是，此时它看起来会不太协调，因为所有其它效果都是为一个小按钮设计的，并没有跟着缩放（或者扩大）。
那么，如果我们把这些长度值都改为em单位，那么这些效果的值就变成可缩放（或者扩大）的了，而且是依赖字号进行缩放。
按照这种方法，我们就可以在一处控制按钮的所有尺寸样式了：

button {
    padding: .3em .8em;
    border: 1px solid #446d88;
    background: #58a linear-gradient(#77a0bb, #58a);
    border-radius: .2em;
    box-shadow: 0 .05em .25em gray;
    color: white;
    text-shadow: 0 -.05em .05em #335166;
    font-size: 125%;
    line-height: 1.5;
}