html - OOCSS 对网站性能的影响 - 更短的 css 但具有更多类的庞大 html

Question

我今天正在阅读关于 OOCSS 的内容这表示使用该方法有两个好处

1. 更短的 CSS = 更好的性能
2. 更好的可维护性

我同意第二点，但第一个好处是通过向 html 添加更多类来缩短 css，这增加了可重用性，但整个网站的 CSS 文件可以缓存在浏览器中，但每个页面的 HTML 是不同的。

我的问题是，较短的 CSS 文件如何通过在 html 中添加更多字节(类)来提高整体站点性能，而 css 是单个文件并且会立即下载到缓存中？

Answer 1

通过简化 CSS 选择器、保持属性 DRY 并在 HTML 中使用 class 属性，回流和重绘(理论上)将是轻量级的，从而提高网站的流畅性和整体性能。

回流和重绘发生在什么时候

• 调整窗口大小
• 改变字体
• 添加或删除样式表
• 内容变化，例如用户在输入框中输入文字
• 激活 CSS 伪类，例如 :hover(在 IE 中激活兄弟伪类)
• 操纵类属性
• 操纵DOM的脚本
• 计算偏移宽度和偏移高度
• 设置样式属性的属性

(以上列表从 OOCSS 的创建者 Nicole Sullivan 复制自 Reflows & Repaints: CSS Performance making your JavaScript slow?)

另请观看此视频以了解实际回流和重绘:http://www.youtube.com/watch?v=ZTnIxIA5KGw (大约 30 秒的时间)

也就是说，易于解析的 CSS 还将提高您网站的响应能力(如流畅度)，而不仅仅是可维护代码的质量。