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

来源

2014-04-21 AdeoMikelo

这个问题是基于意见的。就个人而言，如果由于某些原因，值必须相同，我会使用第二个示例。如果只是偶然，也许是第一个。 – Oriol

定义“更好”。 – j08691

通常人们通过分组功能来定义他们的CSS规则。因此，页面的某些部分（导航，内容，标题）将被分组。除此之外，无论是工作还是完全个人喜好。 – Adam

This study by Dave Gregory是我在这个主题上找到的最佳来源。这表明，复制属性/值对是性能差得多：

enter image description here

“龙”是什么格雷戈里是指作为其属性重复多个选择的“臃肿”的格式。

来源

2014-04-21 16:31:58 cantera

我猜在当前浏览器中没有任何变化？ – AdeoMikelo

需要考虑的一个主要更新是Chrome切换到[Blink渲染引擎]（http://ericbidelman.tumblr.com/post/47054222305/blink-chromes-new-rendering-engine）。据我所知，Blink处理渲染树构造或规则排序的方式还没有改变。 – cantera

为性能更好的第二个选项，请参阅本google advice，而是采取在一个地方使用声明的照顾，你可以用一些like this完成，这是在CSS预处理像延长问题sass和手写笔。但是，您的第一个选项可能更加模块化，并使您的css模块在其他站点中更加独立并且可重用，您可以使用css缩减器对每个声明进行分组。

来源

2014-04-21 16:21:51 Twissell

谢谢！伟大的来源。 – AdeoMikelo

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

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

工具存在合并重复，并尽量减少你的代码（here和here例如）

你也可以看一下这article这是一个有点老，但我认为仍然是有价值的。

来源

2014-04-21 16:27:53 tcollart

CSS：重复选择器对重复的声明

回答

相关问题