ID 是 CSS 的魔鬼

概述这个问题在网络上曾经谈论过无数次了，今天我又拿出来讲。主要是警戒喜欢使用ID的朋友。正常情况下的HTML+CSS是不需要使用ID的，除非与JS挂钩时才使用，也就是说我们在编码过程中除非有JS要用到，就尽量不要使用ID。 尤其要注意的是在非特殊情况下编写CSS是千万不要使用 #Name 来定义CSS。 为什… 这个问题在网络上曾经谈论过无数次了，今天我又拿出来讲。主要是警戒喜欢使用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{}可以做到不同。

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

痛苦的是CSS Hack的选择符是用ID来选取的。

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

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

正常通用模块

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

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

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

网忠告：滥用ID造成的失误远远不止这些，希望大家慎用ID。(LIEhuo。Net)

总结

以上是内存溢出为你收集整理的ID 是 CSS 的魔鬼全部内容，希望文章能够帮你解决ID 是 CSS 的魔鬼所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。