我应该堆叠具有匹配属性的 css 选择器，还是使用简写来获得更高效的 CSS？答案

【问题标题】：Should I stack css selectors with matching properties, or use shorthand for more efficient CSS?我应该堆叠具有匹配属性的 css 选择器，还是使用简写来获得更高效的 CSS？
【发布时间】：2011-12-01 01:04:00
【问题描述】：

最近我一直在将具有匹配属性的选择器堆叠到一个规则中，认为这样更有效：

.logo, .menu, .format h2, .format h3, .format h4, .format h5, .format h6, #footer {
    font-family: 'Compressed Light', sans-serif;
    font-weight: 200;
    font-style: normal;
    font-variant: small-caps;
}

.logo {
    font-size: 3.692307692em; /* 48px / 13px */
    line-height: 100%;
}

然后我在单独的规则中设置其他字体属性，例如大小和行高。

即使我需要尽可能多的大小调整规则，使用速记（包括所有属性）会更有效吗？

.logo {
    font: normal small-caps 200 3.692307692em/100% 'Compressed Light', sans-serif; /* 48px / 13px */
}

浏览器处理哪种风格更快？

【问题讨论】：

"只是想尽我所能保存毫秒加载。"干什么用的？
@BoltClock 我只想回答具体问题。如果您认为不值得回答，请继续。我宁愿不要浪费我的时间来解决那些没有回答我提出的实际问题的人。你问我为什么要提高网站性能？真的吗？
@JeffSebring “更高效的 CSS”非常含糊。你是说下载时间，还是分页，时间，还是？？？
P.S. @BoltClock 提出了一个有效的观点——除非你正在运行一个拥有数千行 CSS 和数百条规则的怪物网站，否则它不会有什么不同。
我宁愿不要浪费我的时间来考虑仅仅几毫秒。咻。

标签： css performance css-selectors

【解决方案1】：

如果你想优化性能，最好找a CSS minifier。

就keep your CSS readable，更重要。

如果您想更多地了解 CSS 性能，请查看以下问题：Is there more to optimizing CSS than minimizing character count?。但是恕我直言，大多数时候，网站的速度是带宽问题，而不是 HTML/CSS 解析。

【讨论】：

不要在你的答案中使用谷歌搜索，建议几个/两个你喜欢的，然后你可以建议一个搜索:)
这不是答案。这是我已经知道的另一种优化方式。 wiki 没有解决我的问题。
同意下载差异将是微不足道的。一个更相关的问题可能是浏览器处理哪种样式的速度更快，但我怀疑那里的差异也很小。遵循efficient selectors 的基本规则，并在生产中组合并最小化。除此之外，请使用更具可读性和可维护性的内容。
@steveax 更新了你更好的问题。谢谢。