css 声明效率答案

【问题标题】：css declaration efficiencycss 声明效率
【发布时间】：2017-03-14 18:07:38
【问题描述】：

将 CSS 代码分成多个声明是否会给用户带来更多开销？

我见过一些这样组织的 .css 文件：

/* Font Styles */
#text{ font-size: 12px; color: white;}
.highlight{ color: red}
/* END */

/* Div Positioning */
#text{ position: absolute;}
/* END */

这会导致任何潜在的低效率吗？我知道这种规模的东西不会产生明显的影响，但是对于大型样式表呢？

【问题讨论】：

标签： css

【解决方案1】：

常识说，您拥有的规则越多，开销就会越大。然而，CSS 解析通常很快，所以除非你的样式表真的很大，否则我不会担心它。

【讨论】：

你还应该考虑 CSS 和 HTML 的大小——如果你为每一个小东西创建 CSS 选择器，然后在你的 HTML 中撒上它，下载的大小将会增加，并且用户将等待更长的时间才能查看该站点 - 将其添加到解析 CSS 的可能很小的开销中，您可以获得一些值得优化的东西。

【解决方案2】：

它可以，但前提是您有数千个选择器。阅读这篇文章了解更多信息： http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

【讨论】：

【解决方案3】：

我认为理论上答案必须是肯定的。

浏览器必须解析新规则，必须再次在 DOM 中查找 #text 元素，并且必须执行任何新的布局/渲染计算。

尽管正如您所指出的，请等到出现问题后再开始优化。

【讨论】：