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

Question

哪种CSS编写技术能让渲染引擎更有效地处理：

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

2）在一个选择器中分组共享样式属性。

示例1：重复font-size，但规则较少。

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

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

例如2：更多的规则但只有一个字号

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

p {
color: #000;
}

h1 {
color: #fff;
}

- user3553682

---

这个问题是基于个人观点的。就我个人而言，如果值必须相同，我会使用第二个示例。如果只是偶然的话，可能会选择第一个。 - Oriol

通常人们会通过将功能分组来定义他们的CSS规则。因此，页面的某些部分（导航、内容、标题）将被分组。除此之外，这两种方法都可以工作，并且完全是个人偏好。 - Adam

@mods：已编辑为非基于观点的内容；可以被解除保留状态（在我看来）。 - cantera

Answer 1

这篇 Dave Gregory的研究是我在这个话题上找到的最好的来源。它表明，复制属性/值对对性能的影响要严重得多：

"长格式"是格雷戈里所指的一种"臃肿"的格式，其中属性在多个选择器中重复出现。

- cantera

---

我猜现在的浏览器没有什么变化吧？ - user3553682

需要考虑的主要更新是Chrome切换到Blink渲染引擎。据我所知，Blink处理渲染树构建或规则排序的方式尚未发生任何变化。 - cantera

Answer 2

为了性能更好，第二个选项更好，参见谷歌建议，但要注意只在一个地方使用声明，否则可能会出现这样的问题，这是css预处理器如sass和stylus中扩展的问题。然而，您的第一个选项可能更加模块化，并使您的CSS模块在其他站点上更加独立和可重用，您可以使用CSS压缩器来组合每个声明。

- angvillar

---

谢谢！很棒的资源。 - user3553682

Answer 3

如何组织你的CSS完全取决于你拥有的元素数量。

如果你想要优化，你应该关注无用的空格和重复代码。

有一些工具可以合并重复代码并最小化你的代码（例如这里和这里）

你也可以阅读这篇文章，虽然有点老，但我认为仍然很有价值。

- tcollart