`
hax
  • 浏览: 949919 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

为后代选择器和ID选择器而辩护

    博客分类:
  • CSS
阅读更多
【本文译自 Zeldman (作为前端工程师,不要告诉我你不知道他是谁)在2012年11月写的《IN DEFENSE OF DESCENDANT SELECTORS AND ID ELEMENTS》。】


除了偶尔更新下《Designing With Web Standards》,我这些年已经不再写关于CSS和HTML的具体实践和细节问题了。长江后浪推前浪——其他设计师和开发者接过了我的枪。在很大程度上,无论对他们还是对我们这个行业,这都是件好事。要说清楚代码那些事,最佳人选永远是那些每天花25小时沉浸其中的家伙——我也曾是如此。当像我这样的老家伙转向战略和管理角色(让我们有新的创新领域,也可以有新的写作主题),新一代代码高手也继续着发现和传播新知。这就是生命的神奇轮回吧。

不过在这诸多美好之中,我偶尔也会发现狗屎。有一种观念——如今甚至已固化成信条——即所谓应该避免使用id——因为id“specificity【特化度】太高”——用class总是更可取。对这一信条,我必须称之为——胡扯。

据我所知,此观念来自于Nicole Sullivan著名的面向对象的CSS。这种书写HTML和CSS的方法论被设计用于规模达数千页面的网站——且这多达数千页面的网站是由多达数十个前端工程师经过数年时间建造出来——且通常这建造过程缺乏统一准则或样式指导方针(或者等到有统一准则和样式指导方针之时已然太晚)。在这样的网站上——在像Amazon或Facebook这样从一开始就一锅乱炖的网站上——因为他们有一大帮厨子却没有一个主厨——在这样的网站上,使用id和后代选择器的组合确可能引发问题,特别是当笨拙的码农试图通过创建更specific【更特化】的后代选择器规则来覆盖基于id的后代选择器规则的时候。

在这样特定(而奇葩)的环境下,开发者们不断决斗般的把一条又一条css规则加入到巨大的一坨样式表里,这样式表更像考古遗迹,而非现代代码的好范例。面对如此一坨,Nicole告诫避免基于id的后代选择器或许是明智的。如果你倒了血霉要去弄一个庞大的、开发得一塌糊涂的网站,又不被允许按照常识和最佳实践重构模板和CSS,你可能不得不依靠class而弃用后代选择器和id。

但在几乎所有其他环境下,正确运用id和后代选择器更可取,因为这样更富语义,也更节约带宽。

我一直以来所主张的使用id的方式,其实就是HTML5新增元素的前身。2000年时,我们没有footer元素,为了给该div中的内容赋以结构上的意义,我们这样写:div id="footer"。今天,根据人们访问我们网站所用的浏览器和设备,我们可以选择用HTML5的footer元素替代老方式。但若是我们不能使用HTML5元素,使用id也没有什么不对的。

至于后代选择器,只要这个网站不是由100只猴子设计的,我们完全可以假设开发者能以协调的方式对具有id的div或者HTML5元素内的后代元素赋以样式,并且处于不同id的div或HTML元素中的相同元素可以被赋以不同样式。比如footer中的段落和列表项跟aside中的段落和列表项就可以被赋以不同样式。id(或HTML5元素)和后代选择器就是用来干这个的。给sidebar中的每个段落元素都设上classname不仅无谓浪费带宽,更是粗鲁之极。

跟我念:id没有任何问题,只要你正确运用(表达语义、表达结构、不滥用)。认为class总是比后代选择器和富有语义、表达结构的id更好,这种观念全然谬误。

请注意:我不是在贬低我的朋友Nicole Sullivan的面向对象的CSS对于那些一团乱麻的网站的作用,正如我不会贬低挖掘机对清理灾难现场的作用。我只是不想用挖掘机来清理我的房间。


【完】




1
0
分享到:
评论

相关推荐

    css后代选择器和子选择器的区别介绍

    css后代选择器和子选择器的区别:用法不同,兼容性,所达到的效果不同等等,需要了解的朋友可以参考下

    css后代选择器使用方法实例

    下面是一个css后代选择器的例子,大家参考使用吧

    css 串联选择器和后代选择器介绍及示例

    串联选择器:作用在同一个标签上  复制代码代码如下:”a” id =”qq...后代选择器:作用在不同标签上 复制代码代码如下:<div id =”qq”>”a”>look at the color</span></div> css: #qq .a{ } 注意#qq .a 之前有空格

    css串联选择器和后代选择器使用方法

    串联选择器:作用在同一个标签上 复制代码代码如下:”a” id =”qq”>...后代选择器:作用在不同标签上 复制代码代码如下:<div id =”qq”>”a”>look at the color</span></div>css: #qq .a{} 注意#qq .a 之前有空格

    CSS3样式表-选择器.pptx

    后代选择器 伪类选择器 …… 2 标签选择器,也称为元素选择器,可以为现有的HTML标签指定样式规则。 标签选择器 定义标签选择器的语法格式 使用标签选择器的语法格式 标签选择器名{属性:值;} <标签名>…标签名> 2 ...

    jQuery后代选择器用法实例

    主要介绍了jQuery后代选择器用法,以设置文本颜色的实例分析了后代选择器的应用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下

    jQuery选择器上机练习题及答案.rar

    (答案见下载资源) 上机任务1 ... 在chrome的控制台中输入jQuery...为某dom元素应用某css样式可以使用jQuery中的addClass方法,例如:将id为tt的div元素应用.bt样式,可用些语句:$("#tt").addClass("color","red");

    十三种常见选择器概念介绍

    标签选择器 类选择器 id选择器 通配符选择器 后代选择器 子代选择器 并集选择器 交集选择器 hover伪类选择器 结构为类选择器 链接伪类选择器 焦点伪类选择器 属性选择器

    jQuery选择器分类应用.doc

    $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点 上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,...

    十种CSS选择器详解介绍

    1. 通用选择器 2. 标签选择器 3. ID 选择器 4. 类选择器 5. 后代选择器 6. 子选择器 8. 通用兄弟选择器 9. 分组选择器 10. 属性选择器 基础选择器总结

    css层叠样式表,包括基础样式,背景图,背景图大小,样式表及选择器,后代选择器,伪类选择器,标签选择器

    这个资源主要是方便我自己查看,记录非常潦草,是否下载全凭自愿。

    【温故知新】CSS学习笔记(后代和子代选择器)

    后代和子代选择器   CSS的选择器除了之前介绍的基本选择器之外,还有符合选择器,可以处理一些基本选择器无法处理的难题。 1、后代选择器 比如下面的例子,我们需要将所有的“Hello”选择出来,当然我们可以使用类...

    CSS的后代选择器基础使用示例

    基础来看一个后代选择器的最简单写法,strong标签属于p标签的后代,i标签属于strong标签后代:HTML代码: XML/HTML Code复制内容到剪贴板   my name is <strong>li<i>daze</i></strong>, hahah.   CSS代码...

    CSS选择器-xmind

    CSS选择器 xmind - 选择器分类(ID选择器,类选择器,标签选择器,通配选择器,属性选择器,伪类选择器)。 - 选择器关系(分组,后代,子元素,相邻兄弟,后续兄弟)。 - CSS特性(优先级,继承,层叠)。

    【CSS基础学习】复杂选择器

    文章目录CSS第二课-复杂选择器群组选择器属性选择器根据属性名查找元素根据属性值精确查找多属性选择器根据属性值近似查找根据标签查找派生选择器后代选择器子元素选择器相邻兄弟选择器 CSS第二课-复杂选择器 群组...

Global site tag (gtag.js) - Google Analytics