ID 是 CSS 的魔鬼

正常情况下的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)

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠