CSS 性能 : Multiple selectors with unique value vs. 具有重复值的唯一选择器

Question

给定一组带有一些重叠声明的 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 文件大小和开发便利性方面存在优势。

Answer 1

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

不过，在大多数情况下，选择第一个选项可能是更好的主意。这些类很可能正在处理类似的结构。

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