css 选择器性能的取舍。和大量标签带有都是class

Question

class 和id选择器性能最好，其他选择器我看网上说建议不要用；那么这样的话html文档就会有大量的带有class标签了。对于大量的带有class标签 和 选择器性能比起来。怎么取舍呢?大量class标签会也会影响性能吗？

Answer 1

近期刚好在整理选择器性能相关的知识点，内容如下：

选择器效率从高到低的排序列表:

1. id选择器（#id）

2. 类选择器（.className）

3. 标签选择器（div,h1,p）

4. 相邻选择器（h1+p）

5. 子选择器（ul > li）

6. 后代选择器（li a）

7. 通配符选择器（*）

8. 属性选择器（a[rel="external"]）

9. 伪类选择器（a:hover,li:nth-child）

决定选择器性能的几个点：

1. 首先选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器。

2. 但是想用更快的选择器之前，还要了解选择器的匹配机制，事实上，浏览器读取选择器时，不是按照我们的阅读习惯从左到右，而是遵循的从选择器的右边到左边进行读取的。

3. 那么最右侧的选择器对于性能就起着关键性的作用，它是最先开始查找的，如果最右侧是#id选择器那么性能就很高，如果是标签选择器那么性能就会大打折扣。

最后回答你的问题：

1、class和id选择器性能最好，其他选择器我看网上说建议不要用

虽然id选择器的性能最好，但是因为一个页面内不能出现相同的ID，所以也不可常用。那么最常用的应该就是class类选择器，但是遇到li、td、dd等经常大量连续出现的元素，应该采用class类选择器结合后代选择器进行选择，如.nav > li，而不是在每一个元素上引用class类。

2、那么这样的话html文档就会有大量的带有class标签了

页面中出现大量的class类是最麻烦的，不仅难以维护，而且复用性是最差的，最头疼的还时常因为选择器优先级问题导致定义的属性值失效，所以这种做法没有任何意义，既没有提高性能，也会造成很多麻烦。

3、对于大量的带有class标签 和 选择器性能比起来。怎么取舍呢?大量class标签会也会影响性能吗？

不要太在乎选择器性能，请根据上述的选择器性能优化的方向，大胆灵活运用所有的选择器，多了解CSS的特性，慢慢你的CSS代码就不会被这些问题所困扰了。

参考文章：
《玩转CSS选择器（二） 之 浏览器支持，常见Bug，性能优化》

Answer 2

性能的话是 id > class > tag name

但是不用太纠结这个，我在项目中 90% 以上的选择器使用 class 选择器。在选择器上优化得到的性能提升还没有合并一个 http 请求来得实在。

多提一句，class 命名的话可以参考 BEM 命名规范。

Answer 3

html有大量的class很正常。复杂的文档你不用class和id只用标签选择器不太行得通，一般都是标签选择器和class混着写。id用的都很少了。

Answer 4

建议少用class，多用tag name。
或者说，固定排版的一个模板， 用一个class，
多用下面这样子的
.class h1{}
.class h2{}
.class p{}
.class a{}
.class img{}
等等， 一个功能是一个class名称。

Answer 5

选择器效率从高到低的排序列表:

1. 通用选择器

2. 元素（类型）选择器

3. 类选择

4. 属性选择器

5. 伪类

6. ID选择器

7. 内联样式
   !important 规则例外

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

根据我平时的经验来看，个人觉得当你的页面中的某些部分的样式是差不多的时候，就用class选择器吧，这样可以多次复用，不过同时也可以加一点其他的类名，或者用结构性伪类选择器也是可以的