CSS：重复选择器与重复声明

渲染引擎更有效地处理哪种CSS创作技术：

1） 在多个选择器中重复相同的样式属性/值对，或

2） 在单个选择器中分组共享样式特性

示例1：重复的字体大小，但规则更少

p {
font-size: 1em;
color: #000;
}

h1 {
font-size: 1em;
color: #fff;
}

或示例2：更多规则，但只有一个字体大小

p, h1 {
font-size: 1em;
}

p {
color: #000;
}

h1 {
color: #fff;
}

---

对于性能更好的第二个选项，请参见此，但请注意只在一个位置使用声明，您可以完成一些操作，这是css预处理器（如sass和stylus）中扩展的问题。然而，您的第一个选项可以更加模块化，并使您的css模块在其他站点中更加独立和可重用，然后您可以使用css缩小器对每个声明进行分组

组织css实际上取决于您和您拥有的元素数量

如果你正在寻找优化，你应该把重点放在无用的空白和重复

存在合并重复项和最小化代码的工具（例如）

你也可以读这本书，虽然有点旧，但我认为它仍然很有价值

这是我在这个话题上找到的最好的来源。这表明复制属性/值对的性能要差得多：

---

“Long”是Gregory所说的“臃肿”格式，属性在多个选择器中重复。

这个问题是基于观点的。就我个人而言，如果出于某种原因，值必须相同，我将使用第二个示例。如果这只是偶然的，可能是第一个。通常人们通过分组功能来定义他们的CSS规则。因此，页面的某些部分（导航、内容、标题）将被分组。除此之外，无论是工作还是工作都完全是个人喜好。@mods：编辑为非观点型；可以取下保持（IMO）谢谢！很好的消息来源。我猜目前浏览器中没有什么变化了。据我所知，Blink处理渲染树构造或规则排序的方式尚未改变。