1

I was reading today about OOCSS which says by using that approach have 2 benefits

  1. Shorter CSS = Better performance
  2. Better maintainability

I'm agree with second point but The first benefit point is to make css shorter by adding more classes to html which increase re-usability but CSS file of whole website can be cached in browser but HTML of each page is different.

My question is how a shorter CSS file can increase the overall site performance by adding more bytes (classes) into html, while css is a single file and will be downloaded at once in cache?

4

3 回答 3

5

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

回流和重绘发生在

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

（上面的列表复制自Reflows & Repaints：CSS 性能让你的 JavaScript 变慢？作者 Nicole Sullivan，OOCSS 的创建者）

还可以观看此视频以了解重排和重绘的实际效果：http ://www.youtube.com/watch?v=ZTnIxIA5KGw （大约需要 30 秒的时间）

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

于 2012-03-22T13:08:58.283 回答
1

“更短的 CSS”的性能提升是双重的：

  1. 更小的样式表
  2. 较短的选择器

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

使用像LESS或Sass这样的 CSS 元语言，尤其是。如果你雇用@extend，或mixins给你世界上最好的。

于 2012-03-04T19:31:22.943 回答
1

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

简短的回答是，如果您正在压缩您的 html，正确缓存内容并合理重用内容，那么它没有任何意义。

如果你担心添加一些额外的 CSS 类，那么删除所有的</li>s、''s 等，以及你的</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);

)

于 2012-03-04T18:49:03.457 回答