html - 我应该为所有内容添加一个类/id，还是使用其他选择器

Question

我永远不确定选择元素的最佳(最有效)方法是什么。

假设我有以下布局(非常简单的示例)

<div id="navigation">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</div>

1. 我想选择我的无序列表(确保我不影响整个站点中的任何其他 UL)，我应该执行 #navigation ul {} 还是为 UL 分配一个类？<
2. 我想选择我的列表项，再次确保我只影响那些。我应该执行 navigation ul li{} 还是分配一个类？
3. 最后，如果我想选择我的第一个链接并为其设置样式，我应该执行 #navigation ul li:first-child {} 还是分配一个类？

我明白这些问题几乎是一样的，但我很好奇什么时候应该使用类，什么时候不应该使用。

Answer 1

这里没有硬性规定。

一般的经验法则可能是当您想将某些元素组合在一起时使用类，对它们一视同仁，使用类是唯一的方法。

例如，在您的最后一个示例中，绝对不需要类(class)。

但是，使用示例 3 中的类会带来更好的性能，因为浏览器会更快地找到相关元素。与此相反的是代码易读性略有降低。如果您在所有内容上都有类名，那么阅读其余标记会变得更加困难。

简而言之，在您上面显示的内容中，您所写的内容很好。

你应该阅读 this文章虽然涵盖了选择器的效率。

基本上效率的顺序是这样的:

ID, e.g. #header
Class, e.g. .promo
Type, e.g. div
Adjacent sibling, e.g. h2 + p
Child, e.g. li > ul
Descendant, e.g. ul a
Universal, i.e. *
Attribute, e.g. [type="text"]
Pseudo-classes/-elements, e.g. a:hover

类和 Id 之间的性能差异通常是无关紧要的。

不过，在列表中往下看，速度会大大降低。

这不是在任何地方添加类和 id 的论据 - 它只是让您判断性能和可维护性之间的权衡。