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

Question

哪种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;
}

Answer 1

此study by Dave Gregory是我在此主题中找到的最佳来源。它表明重复属性/值对的性能要差得多：

＆＃34;长＆＃34;是格雷戈里所说的臃肿＆＃34;在多个选择器中重复属性的格式。

Answer 2

表示性能更好第二个选项，请参阅此google advice，但是只需要在一个地方使用声明，你可以用like this来完成，这是css预处理器中扩展的问题像sass和手写笔。但是，您的第一个选项可能更加模块化，使您的css模块更加独立，并且可以在其他站点中重复使用，然后您可以使用css minifier对每个声明进行分组。

Answer 3

组织你的CSS取决于你和你拥有的元素数量。

如果您正在寻找优化，则应该专注于无用的空白和重复。

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

您也可以阅读article这个有点旧但我认为仍然有价值的{{3}}。