css进阶学习 选择符(2)

但是,避免元素样式相互影响,并不代表可以随意地使用继承选择符。前面提到,浏览器会从右向左读取整个选择符序列,直到读取完毕并匹配完成,或者因不匹配而取消。因此,短的选择符序列更有利于浏览器更快地完成匹配过程。相对的,冗长的选择符序列则认为是低效的,比如:

.header ul li .nav_link{}

建议写为:

.header .nav_link{}

一般来说,不超过3层的继承层级就可以满足实际中的开发要求。因此,应减少不必要的继承层级,使用更短的选择符序列。

此外,较长的选择符序列还有一个问题。有较长选择符的样式规则,css优先级的计算值也较大,因此,如果在以后需要写新的样式来覆盖掉它,就需要写更长的选择符(或者使用ID)以获得更高的css优先级。这对性能和代码可读性都是不利的。

避免链式选择符

链式选择符(Chaining selectors)是对单个元素同时写了多个选择符判定的情况。比如p.name是指class名为name,且标签是p的元素,才应用样式。这些判定组合可以是ID选择符,标签选择符,class选择符的任意组合。

但是,链式选择符是过度定义(over qualified)的,不利于重用,也不利于性能优化。如:

a#author{}

建议写为:

#author{}

这里的a是不必要的。一个ID只对应一个元素,没有必要再强调这个元素的标签是什么(同理,class也不必)。另外有

.content span.arrow{}

建议写为:

.content .arrow{}

这里的span.arrow中的span也是不必要的。一方面,这为浏览器在样式匹配时增加了一项额外工作:检查class名为arrow的元素的标签名是不是span,也因此降低了性能。另一方面,如果去掉了这个限定,.arrow的样式定义,就可以用在更多的元素上,也就有着更好的重用性。否则,就还得告诉别人,使用这个的时候只能用在span标签上。

同理,多个class的链式写法,如

.tips.succuss{}

建议更改命名,写为:

.tips_succuss{}

这样可以帮助浏览器减少额外的样式匹配工作。

此外,IE6还存在一个链式选择符的问题,多个class选择符写在一起时,例如.class1.class2.class3,正常情况是只有同时有这全部的class的元素,才应用样式。但IE6只认最后一个,也就是符合.class3这个选择符的元素,就应用样式。

例外情况

前面所述的选择符的写法的建议,只是从浏览器渲染性能优化,及代码的重用性方面分析得到的理论结果。在实际使用中,你并不需要严格按照这些内容来做。例如,如果你确实是准备为class名为intro的元素内的所有a标签元素都加上某样式,那么.intro a这样的选择符是明智的。

结语

关于高效的css选择符的指南,你还可以阅读google developer中的Use efficient CSS selectors

如今,现代浏览器在样式匹配上也逐渐有了更多的优化(参考CSS Selector Performance has changed!),有些方面的内容我们已经不再需要再担心了。但是,这并不意味着不需要考虑写合理的css选择符了。css选择符性能优化是依然存在的事,你的选择符应该更好地体现你的意图,而不是随心所欲地使用。更重要的是,以这样一种稍细腻的,经过思考的想法来写css选择符,并不是一件困难的事。只要你想,形成这样的一种习惯,你就可以自然地在这方面做得更好,何乐而不为呢?

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzxps.html