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

这个戴夫·格雷戈里的研究是我在这个主题中找到的最好的来源。它表明，复制属性/值对对于性能来说要糟糕得多：

​

​

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

Answer 2

对于性能更好的第二个选项，请参见此谷歌建议，但是只需在一个地方使用声明，您可以使用像这样，这是css预处理器中的扩展(如sass和手写笔)的问题。但是，您的第一个选项可能更模块化，并使您的css模块在其他站点中更加独立和可重用，然后您可以使用css小型机对每个声明进行分组。

Answer 3

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

如果您正在寻找优化，则应该将重点放在无用的空白空间和副本上。

存在用于合并重复项和最小化代码的工具(例如，这里和这里 )

您可能还会读到这个文章，它有点旧，但我认为它仍然很有价值。