• 售前

  • 售后

热门帖子
入门百科

css进阶学习 选择符

[复制链接]
万胜 显示全部楼层 发表于 2021-8-16 12:06:13 |阅读模式 打印 上一主题 下一主题
在我最早开始写css的时间,其代码上的高自由度就不绝很令我狐疑。这就是说,同一个设计,如果让差别的人来实现,终极的代码一定是有差异的。但这存在一个题目,如果差别的人通过差别的方法以及代码风格,都从外观上实现了一样的设计,将很难评价谁做得更好。想来也是,既然都实现了设计,达到了目的,css这种没有步调逻辑的代码中,又能找出什么来阐明谁做得更出色呢?
而现在,我认同的观念是,css这种形貌性语言,仍然有着代码上的质量评判。评判尺度就是可维护性(Maintainability)和性能(Performance),用比较通俗的话说,好的css,要对开发者的工作友好(dev-friendly),也要对浏览器友好(browser-friendly)。 本文将阐明怎样从css选择符的角度来进步css代码质量。
关键选择符与浏览器的样式规则匹配原理
css选择符的概念,在之前的新手学习css优先级的开头部分也有提到,是指每一条样式规则中,形貌把样式作用到哪些元素的部分,也即{}之前的部分。在本文,还要额外先容一个概念:关键选择符(Key selector)。关键选择符就是在每一条样式规则起始的{之前的最后一个选择符,如下图:

css选择符将确定背面的属性界说要作用到哪些元素,因此存在一个浏览器根据css选择符来应用样式到对应元素的匹配过程。关于浏览器的样式匹配系统,David Hyatt在Writing Efficient CSS for use in the Mozilla UI一文中提到了以下内容:
  1. The style system matches a rule by starting with the rightmost selector and moving to the left through the rule's selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.
复制代码
意思是说,浏览器引擎在样式匹配时,以从右向左的顺序举行。在具体匹配某一条样式规则时,这个从右向左的过程会不绝持续,直到读取完备个选择符序列并完成匹配,或因某一个地方的不匹配而取消(然后转到另一条样式规则)。
至于为什么浏览器会选择这样的匹配顺序,你可以看看Stack Overflow上的相干讨论。大致上解释一下的话,由于最右边的关键选择符直接表现了样式界说应作用的元素,以是从右向左的顺序更利于浏览器在初始匹配的时间就确定有样式界说的元素聚集,并更快地在找某一个元素的样式时避开大多数实际没有作用到的选择符。
更好的css选择符,是让浏览器在样式匹配过程中减少匹配查询次数,以更快的速率完成样式匹配,从而优化前端性能。这其中,也必须参考浏览器的对于样式从右向左的匹配顺序。
css选择符的精确使用方式更特定
更具体的关键选择符
关键选择符是浏览器引擎在样式匹配时最先读取到的部分,因此,如果你在某一条样式规则中使用更特定、具体的选择符,可以资助减少浏览器的查找匹配次数。
比如说下边这样的选择符:
  1. .content .note span{}
复制代码
最后一个
  1. span
复制代码
是关键选择符,而
  1. span
复制代码
这个标签,在网页中使用好坏常多的。浏览器从
  1. span
复制代码
开始读取选择符,就大概会为因此在样式匹配上做了一些额外工作。
如果你确定只是想为具体处于那一个位置的
  1. span
复制代码
元素界说样式,更好的做法是为
  1. span
复制代码
定名class,比如定名为
  1. span.note_text
复制代码
,然后简朴写为:
  1. .note_text{}
复制代码
使用class选择符
class选择符(类选择符)是最利于性能优化的选择符。相对于class,ID的缺点是只答应界说给一个元素,无法重用。而别的,它在使用上没有任何比class更好的地方。很多时间,你很难确定某一个元素是否是唯一的。另外,使用class来界说样式,而生存ID给javascript,不绝是一个较好的实践。如果可以,不使用ID来界说样式。
而相对于class,标签在html中的重复性要更大,因此同样大概让浏览器在样式匹配时做更多的额外工作。如果可以,除css样式清零(reset)外,不使用标签选择符(也叫元素选择符)。
缩短选择符序列
继续写法(准确地说,这里指css关系选择符中的包罗选择符)是css中很常用的写法。继续写法的初衷是,如果有两个元素,都是同样的标签或有相同的class定名,加入父元素的选择符构成选择符序列,就可以避免在不需要的时间两个元素的样式互相影响。比如
  1. .confirm_layer .submit_btn
复制代码
就是指,class名为
  1. submit_btn
复制代码
,且有一个class名为
  1. confirm_layer
复制代码
的父元素的元素,才应用样式。
但是,避免元素样式相互影响,并不代表可以随意地使用继续选择符。前面提到,浏览器会从右向左读取整个选择符序列,直到读取完毕并匹配完成,或者因不匹配而取消。因此,短的选择符序列更有利于浏览器更快地完成匹配过程。相对的,冗长的选择符序列则认为是低效的,比如:
  1. .header ul li .nav_link{}
复制代码
发起写为:
  1. .header .nav_link{}
复制代码
一样平常来说,不凌驾3层的继续层级就可以满意实际中的开发要求。因此,应减少不须要的继续层级,使用更短的选择符序列。
别的,较长的选择符序列尚有一个题目。有较长选择符的样式规则,css优先级的计算值也较大,因此,如果在以后需要写新的样式来覆盖掉它,就需要写更长的选择符(或者使用ID)以得到更高的css优先级。这对性能和代码可读性都是倒霉的。
避免链式选择符
链式选择符(Chaining selectors)是对单个元素同时写了多个选择符判断的环境。比如
  1. p.name
复制代码
是指class名为
  1. name
复制代码
,且标签是
  1. p
复制代码
的元素,才应用样式。这些判断组合可以是ID选择符,标签选择符,class选择符的恣意组合。
但是,链式选择符是过分界说(over qualified)的,倒霉于重用,也倒霉于性能优化。如:
  1. a#author{}
复制代码
发起写为:
  1. #author{}
复制代码
这里的
  1. a
复制代码
是不须要的。一个ID只对应一个元素,没有须要再夸大这个元素的标签是什么(同理,class也不必)。另外有
  1. .content span.arrow{}
复制代码
发起写为:
  1. .content .arrow{}
复制代码
这里的
  1. span.arrow
复制代码
中的
  1. span
复制代码
也是不须要的。一方面,这为浏览器在样式匹配时增加了一项额外工作:检查class名为
  1. arrow
复制代码
的元素的标署名是不是
  1. span
复制代码
,也因此低沉了性能。另一方面,如果去掉了这个限定,
  1. .arrow
复制代码
的样式界说,就可以用在更多的元素上,也就有着更好的重用性。否则,就还得告诉别人,使用这个的时间只能用在
  1. span
复制代码
标签上。
同理,多个class的链式写法,如
  1. .tips.succuss{}
复制代码
发起更改定名,写为:
  1. .tips_succuss{}
复制代码
这样可以资助浏览器减少额外的样式匹配工作。
别的,IE6还存在一个链式选择符的题目,多个class选择符写在一起时,例如
  1. .class1.class2.class3
复制代码
,正常环境是只有同时有这全部的class的元素,才应用样式。但IE6只认最后一个,也就是符合
  1. .class3
复制代码
这个选择符的元素,就应用样式。
例外环境
前面所述的选择符的写法的发起,只是从浏览器渲染性能优化,及代码的重用性方面分析得到的理论效果。在实际使用中,你并不需要严格按照这些内容来做。例如,如果你确实是准备为class名为
  1. intro
复制代码
的元素内的全部
  1. a
复制代码
标签元素都加上某样式,那么
  1. .intro a
复制代码
这样的选择符是明智的。
结语
关于高效的css选择符的指南,你还可以阅读google developer中的Use efficient CSS selectors。
现在,现代浏览器在样式匹配上也渐渐有了更多的优化(参考CSS Selector Performance has changed!),有些方面的内容我们已经不再需要再担心了。但是,这并不意味着不需要思量写合理的css选择符了。css选择符性能优化是依然存在的事,你的选择符应该更好地体现你的意图,而不是随心所欲地使用。更紧张的是,以这样一种稍精致的,颠末思索的想法来写css选择符,并不是一件困难的事。只要你想,形成这样的一种风俗,你就可以自然地在这方面做得更好,何乐而不为呢?
以上就是本文的全部内容,希望对大家的学习有所资助,也希望大家多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作