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

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

答案是这取决于具体情况。CSS类应该描述功能，而不是表示，因此不建议使用

灰色内容

，而

菜单内容

更合理。因此，答案归结为

1

、

2

和

3

实际上是什么。如果它们代表相似的内容类别，那么将它们的样式组合在一起可能是有意义的（如示例A所示）。如果以后可能会更改单个属性，那么即使它们是重复的，也应该将它们分开

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

---

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

性能也将取决于您的HTML，而不仅仅是选择器。您做了什么来测试性能？你试过计时吗？您目前是否遇到您认为与CSS相关的问题？关于“偏好”的问题不在讨论范围之内，因为它会产生基于意见的回答，而不是基于事实的回答。我为这个问题添加了一些背景知识。我发现关于这个问题的内容几乎只讨论单个选择器的性能。我还考虑过将每种方法应用于更大的代码库，并从结构和大小的角度查看CSS输出。谢谢