程序员人生 网站导航

ID 是 CSS 的魔鬼

栏目:htmlcss时间:2013-11-15 07:22:18
这个问题在网络上曾经谈论过无数次了,今天我又拿出来讲。主要是警戒喜欢使用ID的朋友。

正常情况下的HTML+CSS是不需要使用ID的,除非与JS挂钩时才使用,也就是说我们在编码过程中除非有JS要用到,就尽量不要使用ID。

尤其要注意的是在非特殊情况下编写CSS是千万不要使用 #Name 来定义CSS。 为什么这么说呢,在前几天因为自己的一个疏忽,使用了ID去定义CSS,还得我们的开发在套用页面时出现了排版错误的BUG,足足花了3天才找到问题,可真是害惨了,开发的MM都要哭了。。。。作为工作多年的我来说,犯这样的错误真是无脸面对开发啊!

来讲讲我当时编写时为什么要用ID来定义CSS:

大家可能都遇到过,将一个通用模块写用一个独立的CSS命名,这样该模块拿到那里都能使用。可是在某些特定地方这个通用模块又有一点点不同,可以用CSS来实现,这个时候我们只需要使用权重比该通用模块先前的CSS权重高的写法来实现就可以了,当然这种写法有很多。而我犯的错就是用了偷懒的办法。

大家都知道,ID定义的class属性权重都高于普通的.class模式,这就是我犯的致命错误。

错误实例:
正常通用模块

<div class="module">这是一个通用模块</div>
特定地方有变化的通用模块

<div class="module" id="side">这是一个通用模块</div>
正常情况下一个 .module{} 就可以了,所有地方都能通用
特殊情况下使用 #side{}可以做到不同。

上面这个只是一个简单的例子,当然我所使用到页面中的比这个要复杂的多,我们的需求是有多个弹出层,本身每个弹出层都有ID控制,否则JS取不到节点,然后弹出曾中还有树形菜单等等,在不同的弹出层中有三种排版模式,其中有一种在弹出曾的树形菜单中要加入复选框,并且树形菜单不能定义宽度。很不幸,我们主流的浏览器中针对复选框的初始CSS定义有所不同,无奈之下为了达到页面的统一,使用了IE6的css hack【非必要情况,这个也少用,尽量不要用】。

痛苦的是css hack的选择符是用ID来选取的。

就在开发使用页面的时候会用到更多的弹出层,所以将其复制并赋予新的ID,当然新的ID在IE6下肯定会出现排版不能达到预期的状况『因为我前面使用了ID作为选择器』。由于我的懒惰,忽视了这点。给开发增加了很多工作量,在这里说声抱歉。

正确实例:
用父级模块的class命名来定义选取特定位置通用模块进行定义。

正常通用模块

<div class="module">这是一个通用模块</div>
特定地方有变化的通用模块

<div class="side">
<div class="module">这是一个通用模块</div>
</div>
正常情况下一个 .module{} 就可以了,所有地方都能通用
特殊情况下使用 .side .module{}可以做到不同。

这才是正确的方法。开发在使用页面的时候是不会改变你的页面结构以及class命名,可是他们会复制不同的模块或页面,以适应系统的需求,同样也会给你编写的节点增加ID,以达到功能的需求。只要我们用class命名来当作选择符就会避免我上面遇到的问题。

(Liehuo.Net)网忠告:滥用ID造成的失误远远不止这些,希望大家慎用ID。(Liehuo。Net)

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐