CSS：每种声明只用一次

Author: Jens Meiert, Google Webmaster

Recommended experience: Working knowledge of CSS

A logical way to make your website faster is to make the client code you send to the browser smaller. When looking to optimize your CSS files, one of the most powerful measures you can employ is to use every declaration just once.

Using every declaration just once means making strict use of selector grouping.

For example, you can combine these rules:

h1 { color: black; }
p { color: black; }
into a single rule:

h1, p { color: black; }
While this simple example appears almost obvious, things get more interesting and harder to quantify when talking about complex style sheets. In our experience, using every declaration just once can reduce the CSS file size by 20-40% on average.

Let's have a look at another example:

h1, h2, h3 { font-weight: normal; }
a strong { font-weight: normal !important; }
strong { font-style: italic; font-weight: normal; }
#nav { font-style: italic; }
.note { font-style: italic; }
Applying the "any declaration just once" rule here results in:

h1, h2, h3, strong { font-weight: normal; }
a strong { font-weight: normal !important; }
strong, #nav, .note { font-style: italic; }
Note that the !important declaration makes a difference here.

There are some things to keep in mind when applying this method:

First, overly long selectors can render this method useless. Repeating selectors like html body table tbody tr td p span.example in order to have unique declarations doesn't save much file size. In fact, since "using every declaration just once" might mean a higher number of selectors, this could even result in a bigger style sheet. Using more compact selectors would help, and would enhance the readability of your stylesheet.
Second, be aware of CSS regulations. When a user agent can't parse the selector, it must ignore the declaration block as well. If you run into trouble with this, just bend the "declaration just once" rule - and use it more than once.
Third, and most importantly, keep the cascade in mind. No matter if you're sorting your style sheets in a certain way or are very relaxed about the order in which rules appear in your style sheets, using every declaration once will make you change the order of the rules in one way or another. This order, however, can be decisive for a browser to decide which rule to apply. The easiest solution if you're running into any issues with this is to make an exception as well and use the declaration in question more than once.
Alas, this is not always trivial to implement-this may change the cascading order and require a different workflow.

Workflow
"Using every declaration just once" requires more attention when maintaining stylesheets. You will benefit from finding a way to track changed and added declarations to get them in line again. This is not hard when using a more or less reasonable editor (showing line changes, for example), but needs to be incorporated into the workflow.

One way, for instance, is to mark rules you edited or added by indenting them. Once you're done updating your stylesheet, you can check for the indented rules to see if there are any new duplicate declarations, which you could then move to make sure each one of them is only used once.

At Google, we apply this method in several of our style sheets, for example in one of our core style sheets for static pages (which has also been compressed).

作者：Jens Meiert，Google网站管理员

推荐阅读背景：CSS相关知识

使得你的网站访问速度更快的一种典型做法是让浏览器执行更少的代码。在对CSS文件进行优化时，可以使用的一种很强大的做法是每种声明只使用一次。

每种声明只使用一次意味着对选择器进行更加严格的分组。

比如，可以把下面的规则：

h1 { color: black; }
p { color: black; }

合并成一条规则：

h1, p { color: black; }

上面简单的例子看起来很显然，不过当样式表变得复杂的时候，对它所带来的好处进行量化就变得更加有趣和困难。根据我们的经验，如果每种声明只使用一次的话，平均可以使得CSS文件的大小减少20-40%。

我们来看另外一个例子：

h1, h2, h3 { font-weight: normal; }
a strong { font-weight: normal !important; }
strong { font-style: italic; font-weight: normal; }
#nav { font-style: italic; }
.note { font-style: italic; }

在应用“每种声明只使用一次”的规则之后，得到：

h1, h2, h3, strong { font-weight: normal; }
a strong { font-weight: normal !important; }
strong, #nav, .note { font-style: italic; }

注意，此处需要注意对于!important声明的处理。

在应用这种方法的时候，需要注意下面几点：

在选择器过长的时候，该方法无效。为了得到惟一的声明而重复使用的选择器，如html body table tbody tr td p span.example这样的，并不能节省文件大小。事实上，应用“每种声明只使用一次”的规则，很可能造成更多数量的选择器，从而使得文件更大。这个时候，应该使用更加紧凑的选择器，可以提高样式表的可读性。
注意CSS规范。当一个用户代理不能解析某个选择器的时候，它必须忽略整个声明块。如果你遇到这种情况，就不要管“每种声明只使用一次”的规则了。
最重要的一点，要注意CSS的声明是层叠的。不论你是喜欢按照某种方式来对规则进行排序，还是无所谓它们出现的顺序。应用“每种声明只使用一次”的规则总会改变CSS规则的顺序。然而，浏览器需要根据CSS规则的顺序来确定应用哪些规则。因此那你遇到问题的时候，请忽略“每种声明只使用一次”的规则。
这种规则并不是很简单就能应用的，它可能改变层叠顺序，因此需要不同的工作流程来小心的管理。

工作流程

“每种声明只使用一次”的规则要求在维护样式表的时候更加小心。如果你能找到一个方式来跟踪修改的和新增的声明的话，那就再好不过了。你可以使用一个普通的文本编辑器来做到这一点，不过需要集成到工作流程中来。

比如，一种做法是以缩进的方式显示修改的和新增的声明。当更新完成之后，可以查看那些缩进的规则来看是不是有重复的声明。如果有的话，就可以移除它们来确保所有的声明只使用一次。

在Google，我们对几个样式表应用了这种方式，比如为静态页面提供的核心样式表中的一个。