Question

对于一般的CSS使用情况有什么好处？我正在展示一个具体的例子，但问题更倾向于在任何情况下对此的一般应用。

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

OR

td.class2 {
    same stuff;
}

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

我认为第二个更快，除非在某些极端情况下，有很多表具有狂野的规则，依赖性和相似性。第一个更具体，因此它使事情变得更加清晰，但我认为当有很多这样的事情时，很难跟踪它。

编写CSS时哪一个更好？我认为这取决于具体情况：

作为一般政策。
没有大量访问者和内容的网页。
网页没有大量访问者，但确实拥有相当多的表格和内容。
网页确实拥有大量访问者，但没有相当多的表格和内容。
确实拥有大量访问者和内容的网页。

谢谢你的时间！

Answer 1

Google Developers上的

Optimize browser rendering有一篇很好的文章介绍了这一点。在该pos中突出显示的一个关键点是你应该永远记住：

引擎从右到左评估每个规则，从最右边的选择器（称为“密钥”）开始，然后移动每个选择器，直到找到匹配或丢弃规则。

和

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

Mozilla开发者网络上的

Writing Efficient CSS也涵盖了这一主题。

因此，在所有5个案例中，第二个效率更高，因为无论内容量多少，浏览器的工作量都会减少。

通常，我将“优化的CSS”视为CSS选择器的链深度的减少，以最小化对HTML结构的依赖性。优秀的Scalable and Modular Architecture for CSS（SMACSS）涵盖了这个原则和更多原则，它本质上是CSS的样式指南，而不是框架或类似的东西。我特别会看一下Selector Performance和Depth of Applicability部分。

Answer 2

首先，您可能希望获得最小的文件大小。我的意思是，你理想地想要一个适合你需求的结构，ala让你的网站看起来正确，并且是最小的尺寸。

当你在不同的父结构中有多个需要不同布局的class2元素时，你提到的第一个方法是好的。这就是说，如果所有class2元素都位于相同的父结构和一般布局中，那么第二种方法就足够了，并且会减小整体大小并提高速度。

CSS选择器冗余与性能

2 个答案: