ID 是 CSS 的魔鬼

正常情況下的HTML+CSS是不需要使用ID的，除非與JS掛鉤時才使用，也就是說我們在編碼過程中除非有JS要用到，就盡量不要使用ID。

尤其要注意的是在非特殊情況下編寫CSS是千萬不要使用 #Name 來定義CSS。 為什么這么說呢，在前幾天因為自己的一個疏忽，使用了ID去定義CSS，還得我們的開發(fā)在套用頁面時出現了排版錯誤的BUG，足足花了3天才找到問題，可真是害慘了，開發(fā)的MM都要哭了。。。。作為工作多年的我來說，犯這樣的錯誤真是無臉面對開發(fā)啊！

來講講我當時編寫時為什么要用ID來定義CSS：

大家可能都遇到過，將一個通用模塊寫用一個獨立的CSS命名，這樣該模塊拿到那里都能使用。可是在某些特定地方這個通用模塊又有一點點不同，可以用CSS來實現，這個時候我們只需要使用權重比該通用模塊先前的CSS權重高的寫法來實現就可以了，當然這種寫法有很多。而我犯的錯就是用了偷懶的辦法。

大家都知道，ID定義的class屬性權重都高于普通的.class模式，這就是我犯的致命錯誤。

錯誤實例：
正常通用模塊

<div class="module">這是一個通用模塊</div>
特定地方有變化的通用模塊

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

上面這個只是一個簡單的例子，當然我所使用到頁面中的比這個要復雜的多，我們的需求是有多個彈出層，本身每個彈出層都有ID控制，否則JS取不到節(jié)點，然后彈出曾中還有樹形菜單等等，在不同的彈出層中有三種排版模式，其中有一種在彈出曾的樹形菜單中要加入復選框，并且樹形菜單不能定義寬度。很不幸，我們主流的瀏覽器中針對復選框的初始CSS定義有所不同，無奈之下為了達到頁面的統(tǒng)一，使用了IE6的css hack【非必要情況，這個也少用，盡量不要用】。

痛苦的是css hack的選擇符是用ID來選取的。

就在開發(fā)使用頁面的時候會用到更多的彈出層，所以將其復制并賦予新的ID，當然新的ID在IE6下肯定會出現排版不能達到預期的狀況『因為我前面使用了ID作為選擇器』。由于我的懶惰，忽視了這點。給開發(fā)增加了很多工作量，在這里說聲抱歉。

正確實例:
用父級模塊的class命名來定義選取特定位置通用模塊進行定義。

正常通用模塊

<div class="module">這是一個通用模塊</div>
特定地方有變化的通用模塊

<div class="side">
<div class="module">這是一個通用模塊</div>
</div>
正常情況下一個 .module{} 就可以了，所有地方都能通用
特殊情況下使用 .side .module{}可以做到不同。

這才是正確的方法。開發(fā)在使用頁面的時候是不會改變你的頁面結構以及class命名，可是他們會復制不同的模塊或頁面，以適應系統(tǒng)的需求，同樣也會給你編寫的節(jié)點增加ID，以達到功能的需求。只要我們用class命名來當作選擇符就會避免我上面遇到的問題。

(Liehuo.Net)網忠告：濫用ID造成的失誤遠遠不止這些，希望大家慎用ID。(Liehuo。Net)

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈