MaintainableCSS 《可維護性 CSS》 --- ID 篇

ID

從語法上講，當只有一個實例時，咱們應該使用一個ID。當有多個時，咱們應該使用一個 class。

可是，ID 做用的優先級高於 class ，在咱們想覆蓋一個樣式的時候，這就會致使問題。

爲了演示，讓咱們把一個 ID 元素的顏色從紅色替換成藍色。

HTML 代碼以下：

<div id="module" class="module-override">

CSS 代碼:

#module {
    color: red;
}

.module-override {
    color: blue;
}

即便覆蓋 module-override 聲明中設爲藍色，元素也最終也紅色的。把 ID 換成 class 後，就解決了這個問題。

<div class="module module-override">

.module {
    color: red;
}

.module-override {
    color: blue;
}

如今，問題解決了。

雖然使用 ID 進行樣式定義是有問題的，但咱們仍然能夠在其餘操做上使用。例如，使用 ID 作如下連接的時候：
label 指向輸入字段;
URL 中的哈希片斷指向到頁面中的錨;
ARIA 屬性幫助屏幕閱讀器用戶;

最後總結

只要您須要啓用瀏覽器和輔助技術的特定行爲時候，能夠使用ID。可是避免使用它們做爲樣式的鉤子。