3

什么对一般 CSS 使用更好？我正在展示一个具体的例子，但这个问题更适合在任何情况下普遍应用。

table.class tbody tr td.class2 {
    stuff;
}

或者

td.class2 {
    same stuff;
}

（如果唯一的 td.class2 总是有父母：table.class tbody tr。）

我假设第二个更快，除非可能在某些极端情况下，其中有很多带有狂野规则、依赖关系和类似的表。第一个更具体，所以它使事情更清楚，但我认为当有很多这些时，很难跟踪它。

写 CSS 时哪个更好？我认为这取决于上下文：

  1. 作为一项普遍的好政策。
  2. 没有大量访问者和内容的网页。
  3. 没有大量访问者的网页，但确实有相当多的表格和内容。
  4. 确实有大量访问者但没有相当多的表格和内容的网页。
  5. 确实有大量访问者和内容的网页。

谢谢你的时间！

4

2 回答 2

2

在 Google Developers 上优化浏览器渲染有一篇很好的文章涵盖了这一点。你应该永远记住的在那个 pos 中两次突出显示的关键点是：

引擎从右到左评估每个规则，从最右边的选择器（称为“键”）开始，遍历每个选择器，直到找到匹配项或丢弃规则。

和

根据这个系统，引擎必须评估的规则越少越好。

Mozilla Developer Network 上的Writing Efficient CSS也涵盖了这个主题。

因此，第二个在所有 5 种情况下都更有效，因为无论内容量如何，浏览器都会做更少的工作。

一般来说，我将“优化的 CSS”视为减少 CSS 选择器的链深度，以最大限度地减少对 HTML 结构的依赖。出色的 CSS 可扩展和模块化架构(SMACSS)涵盖了这一原则以及更多内容，它本质上是 CSS 的样式指南，而不是框架或类似的东西。特别是，我会看一下选择器性能和适用性深度部分。

于 2013-04-29T07:54:41.027 回答
1

作为一个很好的第一个赌注，你会想要尽可能小的文件大小。我的意思是，理想情况下，您需要一个适合您需求的结构，ala 使您的网站具有正确的外观，并且是可能的最小尺寸。

当您在需要不同布局的不同父结构中有多个 class2 元素时，您提到的第一种方法很好。话虽如此，如果所有 class2 元素都位于相同的父结构和总体布局中，则第二种方法就足够了，并且会减小整体大小并提高速度。

于 2013-04-29T07:29:24.840 回答