博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[CSS]为什么不推荐在CSS中使用ID选择器
阅读量:5953 次
发布时间:2019-06-19

本文共 1389 字,大约阅读时间需要 4 分钟。

最近我在对 CSS 的样式进行一些性能测试,然后我的一些好友问我:为什么你不使用 IDs 来作为页面上一些特定的内容部分呢?

这个问题很难回答,有下面几个理由:

  1. 页面中的该元素无法重用
  2. 螺旋式下降导致的特异性
  3. 通过 IDs 用来标识一些非常特殊的内容,但牺牲了抽象性
  4. 性能方面可通过其他方式来解决

下面我们针对这四点进行深入探讨。

无法重用页面的元素

IDs 对程序员来说相当于是单例,一个页面中不允许存在两个相同的 id(当然浏览器不会报错就是了),这就意味着你不可能重用某个元素,相当于是一对一的关系。而根据我的速度测试,如果一段 CSS 代码只对一个元素起作用对速度并不利,同时也带来了 CSS 膨胀的额外开销。

译者:下面这一节翻译的有点不知所云,大家如果看不懂还是看英文原文吧。

由螺旋式下降导致的特异性

CSS 关于重载的两个方法:

  1. 级联: (任何下一级的元素都可以重写上一级CSS规则)
  2. 特异性: the idea of creating weight by using weighted selectors.

为什么我说这里是一个螺旋式下降,因为为了要重载一个优先级很高的规则,我必须给它设置添加再高的优先级。

 

.ModuleOfficeList .property-checkbox input {display:block;margin-bottom:8px;_border:0px !important;} .ModuleOfficeList .property-checkbox,.ModuleOfficeList .new-icon,.ModuleOfficeList .open-icon {display:block} ....uid-officelistings .property-checkbox {display:none !important; }

 

上面是我在 2005 年的一段真实的代码,上面的代码我必须在最后使用 !important 规则来对选择器规则进行重新排序。这很不好。一旦我们这样做......它需要我们更多的时间去追捕父ID,我们将推翻当前的特异性。这是不友好的而且不利于维护,最终你会掉进入自己挖好的洞,只有重构才能摆脱这个噩梦。

另一方面:

我听到少数的一些声音关于使用 ID 选择器的好

使用 ID 选择器更快

是的,这一点的确没错,而且我也曾经证明过。但是性能的表现微乎其微,但当你使用嵌套其他选择器时性能就下降了:

 

#profile-module {...} #profile-module li {...} .profile-module li {...}

 

第二个选择器就没有第三个来的快,因为CSS是从右到左的,因此 li 会先被扫描,因此通过 ID 进行定位将直接被忽略。

关于 CSS 选择器的性能问题,请看 .

IDs 就是单例的意思

很多人会在页面中定义 ID ,但某个元素在所有页面中只出现一次的话,用 ID 选择器是没问题的。我唯一声明的是所有代码都应该是可重用的,如果能避免还是尽量避免。

特别说明

最后需要说明的是,我并不是要大家完全抛弃使用 ID,ID 可以加速 JavaScript 执行,在文档中传达具体的意义。

我只是不建议在 CSS 中使用 ID 选择器,当然,决定权在于你自己。

 

转载地址:http://adaxx.baihongyu.com/

你可能感兴趣的文章
Vuex学习
查看>>
bootstrap - navbar
查看>>
切图崽的自我修养-[ES6] 编程风格规范
查看>>
[React Native Android 安利系列]样式与布局的书写
查看>>
利用dxflib读写cad文件
查看>>
服务器迁移小记
查看>>
FastDFS存储服务器部署
查看>>
Android — 创建和修改 Fragment 的方法及相关注意事项
查看>>
流程控制: jQ Deferred 与 ES6 Promise 使用新手向入坑!
查看>>
swift基础之_swift调用OC/OC调用swift
查看>>
Devexpress 15.1.8 Breaking Changes
查看>>
推荐JS插件:imagesLoaded,监测图片加载情况并提供相应的事件(加载成功/失败)...
查看>>
Java B2B2C多用户商城 springcloud架构- common-service 项目构建过程(七)
查看>>
杨老师课堂之ArrayList集合常用方法解析
查看>>
ElasticSearch Client详解
查看>>
新零售讲堂之时代下的传统零售业,何去何从?
查看>>
c++读取和写入TXT文件的整理
查看>>
深入动态人脸识别小场景应用,2019年或将迎来爆发期
查看>>
Ionic2 下处理 Android 设备下返回按钮的事件
查看>>
linux基础--grep以及模式正则表达式
查看>>