[CSS]为什么不推荐在CSS中使用ID选择器

摘要:
最近我在对CSS样式进行一些性能测试,我的一些朋友问我:为什么不在页面上使用ID作为特定的内容部分?根据我的速度测试,如果一段CSS代码只在一个元素上工作,这对速度不好,而且还会带来额外的CSS膨胀成本。关于CSS选择器的性能,请参阅Steve Sounders解释了选择器的工作速度。ID意味着许多人将在页面中定义ID,但如果元素在所有页面中只出现一次,则可以使用ID选择器。我只是不建议在CSS中使用ID选择器。当然,这是你的决定。

最近我在对 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 选择器的性能问题,请看 Steve Souders explains how selector speed works.

IDs 就是单例的意思

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

特别说明

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

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

免责声明:文章转载自《[CSS]为什么不推荐在CSS中使用ID选择器》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇JavaFX 1.2 SDK 发布,增加 Linux 及 OpenSolaris 支持两个服务器之间数据迁移用到的命令下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

css的引入方式和区别

一、css的四种引入方式 1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <link href="css/style.css" type="text/css" rel="stylesheet" /> st...

Selenium---元素定位之CSS定位

CSS 选择器: 常见符号: #表示 id选择器 .表示 class选择器 >表示子元素,层级 一个空格也表示子元素,但是是所有的后代子元素,相当于 xpath 中的相对路径 一、css:属性定位 1.css可以通过元素的id、class、标签这三个常规属性直接定位到 2.如下是百度输入框的的html代码: <input type="text"...

不可思议的纯 CSS 实现鼠标跟随效果

直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为。而鼠标跟随这种效果属于行为,要实现通常都需要借助 JS。 当然,本文的重点,就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果。 原理 以上面的 Demo 为例子...

第二章 JSP页面制作基础

第二章  JSP页面制作基础 [本章导读] JSP页面将Java代码嵌入到HTML脚本中,掌握HTML语言是学习JSP的基础。HTML是网页制作的一种规范,一种标准,它通过标记符来标记网页的各个部分。本章首先介绍用HTML制作网页的各种标记符的设置方法,接着介绍了CSS的基本概念和使用方法。此外,为了增强读者对网页制作的了解,介绍了Dreamweaver的...

css简单实现五角星评分、点赞收藏、展示评分(半颗星、1/3颗星)

本文原创作者为:by 苏小苏   https://www.cnblogs.com/sxs161028/,关于本文任何观点,权力,归原作者所有 1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来。总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花了2个小时,把...

CSS3之动画模块实现云朵漂浮效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画模块-云层效果</title> <style> * { margin:0; paddi...