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中所示）。如果你最后会改变个别属性是合理的，那么即使它们是重复的，也要将它们分开是有意义的。

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

至于表现，这里无关紧要，我不担心。而是做一些更好的可维护性并花时间优化其他东西。

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

1 个答案: