哪个CSS选择器更好实践？

Question

我想知道哪个选择器是更好的练习,为什么？

示例HTML代码

<div class="main">
   <div class="category">
      <div class="product">
      </div>
   </div>
</div>

我们希望.product通过CSS选择器实现:

1. .product
2. .main .category .product
3. div.main div.category div.product

我将它们与以下标准进行比较:

• 性能
• 可维护性
• 可读性

我们可以假设.product整个页面都是唯一的.我们可以使用id而不是class,但在这种情况下,我们选择了class属性.

Answer 1

我们可以假设.product整个页面都是唯一的.

性能方面最好的当然是ID选择器,但是因为你使用的是一个类,所以.product会排在第二位.

至于可维护性,可读性和语义(还有更多的性能)......

1. .product 手段

   查找具有类的任何元素product.

   很容易理解,如果你基于上面的假设使用它,几乎与ID选择器相同.

   我想在这种情况下使用类选择器和ID选择器之间的唯一区别是ID选择器强制执行此元素的唯一性,而不仅仅是因为恰好是一个这样的元素.换句话说,ID选择器的作用是知道文档只有一个这样的唯一元素,而类选择器则没有.

2. .main .category .product 手段

   查找具有类的product
   任何元素,这些元素包含在具有类的category
   任何元素中,这些元素包含在具有类的任何元素中main.

   浏览器的任务是检查这些元素的祖先,如果你只有一个元素,这是多余的.product.许多浏览器布局引擎从右到左评估CSS选择器,类似于我如上所述将选择器翻译成英语的方式.

3. div.main div.category div.product 手段

   发现只有<div>有一类元素product
   ,其包含在仅<div>具有一类的元素category
   ,其包含在仅<div>具有一类元素main.

   此外,在检查元素的层次结构时,您希望浏览器仅与div类匹配product.如果要匹配此类的任何元素,则此选择器将无法按预期工作.

   如果您确定只有div该类的一个,并且您只想匹配该元素,那么您可以使用div.product,但.product仍然可以更好地执行.

Answer 2

我不是大师,但我至少可以发表评论.
我认为第一种方式很容易:

• 它阻止CSS必须遍历DOM树来查找元素,
• 如果编辑任何父元素,则必须编辑CSS选择器.可读性:个人选择,有些人可能喜欢第二种,但大多数人不会真正介意