编写高效的CSS选择符(节选)

最右边优先

css选择符是从右向左进行匹配的。

样式系统从最右边的选择符开始向左匹配规则。只要当前的选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和匹配的元素,或者因为不匹配而退出。

编写高效选择符指南

避免使用通配规则
除了传统意义上的通配选择符之外,相邻兄弟选择符、子选择符、后代选择符和属性选择符都可以归纳为“通配规则”。推荐仅用ID、类和标签选择符。

不要限定ID选择符
在页面中一个指定的ID只能对应一个选择符,所以没有必要添加额外的限定符。

不要限定类选择符
不要用具体的标签限定类选择符,而是根据实际情况对类名进行扩展。

让规则越具体越好
不要试图编写常选择器(ol li a),最好是创建一个像.list-anchor一样的类,并把它添加到适当的元素上。

避免使用后代选择符
通常处理后代选择符的开销是最高的,而使用子选字符也可以得到想要的结果时,并且更高效。

避免使用标签——子选择符
如果有像#toc > li > a这样的基于标签的子选择符,那么应该使用一个类来关联每个标签元素,如.toc-anchor。

质疑子选择符的所有用途
再次提醒大家检查所有使用子选择符的地方,然后尽可能用具体的类取代它们。
依靠继承
了解哪些属性可以通过继承而来,然后避免对这些属性重复指定规则。

应用JS修改样式

应用JS修改样式很容易触发回流。回流需要重新应用CSS规则,这样意味着浏览器必须再次匹配所有的CSS选择符。如果CSS选择符是低效的,那么回流可能消耗的时间就会多到引起用户注意。

总结

杜绝低效CSS选择符的影响,不仅要考虑页面加载时间,也要考虑用户交互时如何使用样式进行表现。如果JS对样式属性有操作,且页面开始变慢,那么低效的CSS选择符就很可能是罪魁祸首。

关键字: 关键选择符、回流时间

原文地址:https://www.cnblogs.com/mackxu/p/css-performace.html