CSS 性能：具有唯一值的多个选择器与具有重复值的唯一选择器答案

【问题标题】：CSS Performance: Multiple selectors with unique value vs. unique selectors with duplicate valuesCSS 性能：具有唯一值的多个选择器与具有重复值的唯一选择器
【发布时间】：2013-10-14 12:56:20
【问题描述】：

给定一组带有一些重叠声明的 CSS 规则，有两种主要的方法来构建样式。

一方面，我们可以声明每个属性一次，但多次使用选择器：

.one,
.two,
.three {
     color: #444;
}

.one   { // more specific styles }
.two   { // more specific styles }
.three { // more specific styles }

另一方面，我们可以只使用每个选择器一次，但属性重复：

.one {
     color: #444;
     // more specific styles
}

.two {
     color: #444;
     // more specific styles
}

.three {
     color: #444;
     // more specific styles
}

理论上还有第三种选择，将每个常用属性隔离在自己的类中，即.grey-stuff { color: #444; }，但这通常会导致 HTML 混乱。

在上述两种方法中，如果有的话，应该首选哪一种？

问题的背景是维护更大的 CSS 代码库。我不确定渲染性能是否存在相关差异，但我可以想象在总 CSS 文件大小和开发便利性方面存在优势。

【问题讨论】：

性能也取决于您的 HTML，而不仅仅是您的选择器。
您为测试性能做了哪些工作？你试过计时吗？您当前是否遇到您认为与 CSS 相关的问题？关于“偏好”的问题超出了 SO 的范围，因为它会生成基于意见的响应而不是基于事实的响应
CSS Selector Chain Performance的可能重复
我为这个问题添加了一些背景知识。我发现的关于这个问题的东西几乎只讨论了单个选择器的性能。我还考虑将每种方法应用于更大的代码库，并根据结构和大小查看 CSS 输出。
确实，这个问题是有方向的。谢谢！

标签： css performance

【解决方案1】：

答案是视情况而定。 CSS 类应该描述功能而不是表示，因此不建议使用 grey-stuff 类，而 menu-stuff 会更明智。因此，答案归结为one、two 和three 实际上是什么。如果它们代表相似的内容类别，则将它们的样式组合在一起可能是有意义的（如示例 A 中所示）。如果您最终会更改单个属性是合理的，那么即使它们是重复的，也将它们分开是有意义的。

不过，在大多数情况下，使用第一个选项可能会更好。这些类很可能正在处理类似的构造。

至于性能，这里无关紧要，我不会担心。而是做对可维护性更好的事情，并花时间优化其他事情。

【讨论】：