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)

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!