3

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

4

1 回答 1

4

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

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

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

于 2013-10-07T20:02:30.090 回答