来自positioniseverything

的How To write Efficient CSS是篇浅显易懂的CSS优化技术教学文章，实用性强，文字优美，非常经典，曾经JJGOD有翻译过，但是链接已经失效，自己也没有保存，所以干脆用自己的风格翻译出来，如果能达到JJGOD的翻译水准将是我的无上荣幸。尽管我努力试图保留原文作者的原汁原味，但是在翻译过程中发现，作者使用的生动的词句直译成中文反而并不生动，为此加入自己的语气和用词习惯，这样应该会令译文重新恢复“生动”:)
　　水平有限，如有纰漏恳请拨冗斧正......

效率的好处
　　CSS最受追捧的优点就是减小页面体积，从而减少了下载时间，无论是在页面第一次被下载时，还是此后直接从缓存中加载。事实的确如此，但是，这个在页面首次被下载过程中节省下来的体积往往又有很大一部分被浪费掉了，原因就是极度冗余的样式表代码。
　　好吧，一切都结束了，让我们重新开始。你将学习一些高效的样式表编写“密技”，开始对你的样式表敲骨吸髓榨干到最后一滴汁。当然，你不可能藉此节省“巨大”的页面体积，不过，对于那些在激烈的竞争中求生存的网站，省一个字节是一个字节，这些节省的字节对他们而言是极具价值的。
　　有这么几个范围可以进行“字节瘦身”，包括简写属性、多重声明、使用默认值、属性继承和空白的处理。

简写属性
在如何设置页面边距为零(Zeroing page margins)一文谈及了几个CSS简写属性，不过关于这个主题仍然有很多可以说的。

常用的简写属性包括:

• font — 字体，控制"font-size"(字体尺寸)、"font-weight"(字体磅数)、"line-height"(行高)等
• background — 背景，控制元素的背景、定位、重复等
• list-style — 列表样式，设置列表项目符号的属性
• margin — 边距，定义盒装容器各条边框旁留出的空白的宽度
• border — 边框，定义盒状容器各条边框的样式属性，此处会涉及到另几个涉及边框的简写属性
• padding — 内边距，定义盒状容器各条边框内侧留出的补白宽度

以上列表项可以直接链接到W3C CSS 2 specifications中相关的内容章节。

例如，font(字体)属性是一次性同时设置font-style(字体样式)、font-variant(字体变体)、font-weight(字体磅数)、font-size(字体尺寸)、line-height(行高)和font-family(字型组)的简写属性。然而，并不是所有这些属性都必须在简写属性中同时用到。当简写格式中的某些值被省略时，每个“失踪”的属性实际上都被指定使用它的默认值，这些值都可以在W3C specifications的font property(字体属性)内容部分中找到。如果在一个样式表文件中大量使用了字体相关的样式控制属性，那么使用这个简写属性将能显著缩减样式表的体积。

background(背景)和list-style(列表样式)属性也有类似的作用。列表中剩下的几个简写属性涉及到一个CSS盒状容器的四条边框，和前几个属性情况有所不同。

盒状容器边框的简写属性
任何一个区块级元素(divs—区块、tables—表格、lists—列表、paragraphs—段落，等等)的四条边框都有各自的margins、borders和padding属性，可以各自单独设置它们的宽度。就拿borders来说，每条边框都可以独立分配border-style(边框式样)和border-color(边框颜色)。要是将所有这些属性统统拼写出来，乖乖，单这一条规则集就够冗长的了！使用简写规则可以极大地减少工作量。

时钟
假如盒状容器四条边框的某个边框属性都一样，那样的话只要使用基本的简写属性就可以了，比如这样写:

margin: 5px;
border-width: 5px;
padding: 5px;
注意: 必须设置border-style(边框式样)才能显示边框。为此我们可以定义border-style属性或在border属性中设置式样。仅仅使用border-width属性是不能显示边框的。

可是，假如出现其中几条边框的值并不相同的情况，这时候，一种我们称之为“时钟”的CSS特性开始起作用了。让我们把一个盒状容器想象成一个钟面。当指针向上直指，它们所指的相当于盒状容器的顶边，也正是简写属性的第一个值。接下来是三点钟的位置，相当于盒状容器的右侧边。然后是六点钟位置，相当于盒状容器的底边，最后九点钟方位指代左侧边。

来看个例子。我们想在页面上放一个盒状容器，它的顶边距宽10px、右边距宽5px、底边距宽3px、没有左边距。那么用margin简写属性可以这么写:

margin: 10px 5px 3px 0;
在声明属性时，这些属性值之间必须用也只能用空格分隔。并且，除非属性值为零，否则每个值都必须标注单位。

注意一下边距为零时值被定义成0，因为无论什么值只要是零，单位就无关紧要。任何一种单位(px, em, %, 等)的零值等于任何其他单位的零值。

改型时钟
当某几条边框相同时，边框的简写属性可以更大程度地浓缩。如前文所述，当所有边框都一致时，所有边框使用同一值，可是，假如顶边和底边一致，而右侧边和左侧边一致，这样的情况下，边距的代码可以写成如下这样:

margin: 10px 5px;

这样写将顶边和底边的边距设置成10px，两侧的侧边距为5px。还有一招，就是当顶边和底边不同而侧边一致的情况。顶边距10px、左侧和右侧边距5px、底边距20px，我们就这么写:

margin: 10px 5px 20px;

这全都取决于简写属性用到的值得数目以及次序。记住，一个值=所有的边框；两个值=顶/底边框，两侧边框；三个值=顶边框，两侧边框，底边框；四个值=遵循钟面原则。好了，不太难记吧？

  

边框差异
border shorthand properties(边框简写属性)和padding(内边距)同样也可以使用这种“时钟”简写方法。border-width，border-color，border-style和padding和margin(边距)的操控方式相同。不过，border属性还是有一点差异的。border属性可以同时设置盒状容器的四条边框的border-width、border-style和border-color。

当四条边框全都一样时很好处理，但是如果他们不一样呢？难道我们还要回到从前诸如border-top、border-right的日子么？好吧，也许可以。幸运的是，我们另高招。

譬如说盒状容器各边框的式样和颜色都相同，