Question

我今天正在阅读有关OOCSS的文章，其中说使用该方法有两个好处

较短的CSS =更好的表现
更好的可维护性

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

我的问题是，较短的CSS文件如何通过在html中添加更多字节（类）来提高整体网站性能，而css是单个文件并将在缓存中一次下载？ < / p>

Answer 1

通过简化CSS选择器，保持属性DRY并在HTML中使用class属性，回流和重绘（理论上）将是轻量级的，因此可以提高站点的平滑度和整体性能。

时会出现回流和重绘

调整窗口大小
更改字体
添加或删除样式表
内容更改，例如用户在输入框中键入文本
激活CSS伪类，例如：hover（在IE中激活兄弟的伪类）
操纵类属性
操纵DOM的脚本
计算offsetWidth和offsetHeight
设置样式属性的属性

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

另请观看此视频，了解行动中的回流和重拍：http://www.youtube.com/watch?v=ZTnIxIA5KGw（约30秒的时间）

也就是说，轻松解析的CSS也可以提高网站的响应能力（如平滑度），而不仅仅是可维护代码的质量。

Answer 2

显然这没有任何有意义的答案 - 快速的定义是什么？多少字节太多了？

简短的回答是，如果你正在gzipping你的HTML，正确地缓存事物并对事物进行合理的重用，那么它就没有任何有意义的区别。

如果您担心添加一些额外的CSS类，请删除所有</li>等，以及</body>和</html>。此外，对于任何单个单词且不包含任何有问题的字符的属性，请删除它们周围的"。这些更改应该平衡添加类。

（如果听起来有些讽刺，我实际上会建议你在你的缓存层中这样做 - 这样的事情会起作用：

$page_content = str_replace(array("</option>","</td>","</tr>","</th>","</dt>","</dd>","</li>","</body>","</html>"),"",$page_content);       
$page_content = preg_replace('/(href|src|id|class|name|type|rel|sizes|lang|title|itemtype|itemprop)=(\"|\')([^\"\'\`=<>\s]+)(\"|\')/i', '$1=$3', $page_content);                
$page_content = preg_replace('!\s+!', ' ', $page_content);

）

Answer 3

“较短的CSS”带来的性能提升有两个方面：

较小的样式表
较短的选择器

长css选择器效率低下。 Steve Souders（以及其他人）撰写了大量关于CSS selector performance的文章。更高效的选择器可能不仅可以抵消多个类的少量额外字节。

使用CSS元语言，例如LESS或Sass，尤其是如果您使用@extend，或mixins为您提供最好的世界。

OOCSS对网站性能的影响 - 较短的css但较大的html与更多的类

3 个答案: