我是否应该为所有内容添加类/ 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

这里没有硬性和快速的答案.

一般的经验法则可能是当你想组的某些元素结合在一起,把他们相同,并使用一类是做的唯一手段使用类.

例如,在你的最后一个例子中,完全不需要一个类.

但是,使用示例3中的类将获得更好的性能,因为浏览器将更快地找到相关项.与此相反的是代码清晰度的略微降低.如果你在所有内容上都有类名,那么读取其余标记就变得更加困难了.

简而言之,在你上面所展示的内容中,你所写的内容很精致.

你应该阅读此文章虽然涵盖选择效率.

基本上效率的顺序如下:

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的论据 - 它只是让你判断性能和可维护性之间的权衡.