CSS：每种声明只用一次

作者：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，我们对几个样式表应用了这种方式，比如为静态页面提供的核心样式表中的一个。

【本文翻译仅为外语学习及阅读目的，原文作者个人观点与译者及译言网无关】