css选择器层级探讨

作者 : 开心源码 本文共919个字,预计阅读时间需要3分钟 发布时间: 2022-05-11 共80人阅读

css选择器层级探讨

先思考选择器、层级有哪些特性

  1. 一般来说选择器的层级不可以过深,据说过深在解析渲染时会有性可以问题

  2. 层级会限制作使用域,相似于PHP中的命名空间的概念

  3. 层级会影响优先级的计算(多一层权值就会多一点)

而我们面临的辣手问题:

  1. 命名

  2. 作使用域

1:我们总是苦苦思索合适的命名,同时不得不担心会与已有的名称发生冲突。

2:我们也讨厌很深的层级,倒是希望所有的都是一层才好,但是这样有两个缺点,一是不容易区分板块,二是我们常习惯于用层级作使用域来避免样式冲突的问题。

所以,我们喜欢用层级,而后再起一个合适的名字。

但是这个层级究竟几层才最合适呢?

小明爷爷 > 小明爸爸 > 小明 {}

显然层级很大程度上是由结构关系决定的,但是说可以保证明际结构都很浅呢?

小明太太爷爷 > 小明太爷爷 > 小明曾爷爷 > 小明爷爷 > 小明爸爸 > 小明

(完整的html结构关系,实际项目中可可以会更复杂)

尽管我们开发时能尽量去避免,但是得承认这很难完全的避免。

那这个时候怎样办呢?

再回想一遍我们的辣手问题,命名似乎不是问题了,那么就剩一个作使用域了。

我们要定位这里小明(局部而非全局的小明),其实只要要两层即可以了:

小明太太爷爷 > 小明 {}

小明太太爷爷 就是给 小明 充任父级,限制作使用域的。

这样我们的目的也达到了,层级不会那么臃肿冗长了。

而假如不是为理解决冲突,或者者说没有冲突要处理的话,那就无需父级来限制作使用域,直接一级即可以了:

小明 {}

这样最简洁直观。css不同于html,它有自己的运行方式,它不需要那么死板循规蹈矩的套结构,没必要写完整的结构。所以不要有思维定性,写css时应该站在css的角度,去考虑css的特性。

分析完。

补充:尽量少使用过深的层级,Google的网站就很简洁,基本上所有元素都是一层,哪怕把类名写长一点,不要为了显示元素的身份(元素的上下文)而成心加上层级关系,不要觉得这样看起来直观少量,这样的层级结构只是人看起来比较直观而已,对计算机来说,没有任何意义。很多时候,人赋予代码的意义,对计算机来说,并不感冒。

另外,避免层级关系能很方便的实现组合,这也符合了“少使用继承,多使用组合”的准则。

好的 CSS 命名规范能节约 Debug 时间

假如定义头上的头发,手上的指甲该怎样定义,属于元素吗?

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » css选择器层级探讨

发表回复