[CSS]為什麼不推薦在CSS中使用ID選取器

最近我在對 CSS 的樣式進行一些效能測試，然後我的一些好友問我：為什麼你不使用 IDs 來作為頁面上一些特定的內容部分呢？

這個問題很難回答，有下面幾個理由：

1. 頁面中的該元素無法重用
2. 螺旋式下降導致的特異性
3. 通過 IDs 用來標識一些非常特殊的內容，但犧牲了抽象性
4. 效能方面可通過其他方式來解決

下面我們針對這四點進行深入探討。

無法重用頁面的元素

IDs 對程式員來說相當於是單例，一個頁面中不允許存在兩個相同的 id（當然瀏覽器不會報錯就是了），這就意味著你不可能重用某個元素，相當於是一對一的關係。而根據我的速度測試，如果一段 CSS 代碼只對一個元素起作用對速度並不利，同時也帶來了 CSS 膨脹的額外開銷。

譯者：下面這一節翻譯的有點不知所云，大家如果看不懂還是看英文原文吧。

由螺旋式下降導致的特異性

CSS 關於重載的兩個方法：

1. 級聯: (任何下一級的元素都可以重寫上一級CSS規則)
2. 特異性: the idea of creating weight by using weighted selectors.

為什麼我說這裡是一個螺旋式下降，因為為了要重載一個優先順序很高的規則，我必須給它設定添加再高的優先順序。

 

.ModuleOfficeList .property-checkbox input {display:block;margin-bottom:8px;_border:0px !important;} .ModuleOfficeList .property-checkbox,.ModuleOfficeList .new-icon,.ModuleOfficeList .open-icon {display:block} ....uid-officelistings .property-checkbox {display:none !important; } 

 

上面是我在 2005 年的一段真實的代碼，上面的代碼我必須在最後使用 !important 規則來對選取器規則進行重新排序。這很不好。一旦我們這樣做......它需要我們更多的時間去追捕父ID，我們將推翻當前的特異性。這是不友好的而且不利於維護，最終你會掉進入自己挖好的洞，只有重構才能擺脫這個噩夢。

另一方面：

我聽到少數的一些聲音關於使用 識別碼選取器的好

使用 識別碼選取器更快

是的，這一點的確沒錯，而且我也曾經證明過。但是效能的表現微乎其微，但當你使用嵌套其他選取器時效能就下降了：

 

#profile-module {...} #profile-module li {...} .profile-module li {...}

 

第二個選取器就沒有第三個來的快，因為CSS是從右至左的，因此 li 會先被掃描，因此通過 ID 進行定位將直接被忽略。

關於 CSS 選取器的效能問題，請看 Steve Souders explains how selector speed works.

IDs 就是單例的意思

很多人會在頁面中定義 ID ，但某個元素在所有頁面中只出現一次的話，用 識別碼選取器是沒問題的。我唯一聲明的是所有代碼都應該是可重用的，如果能避免還是盡量避免。

特別說明

最後需要說明的是，我並不是要大家完全拋棄使用 ID，ID 可以加速 JavaScript 執行，在文檔中傳達具體的意義。

我只是不建議在 CSS 中使用 識別碼選取器，當然，決定權在於你自己。