id與class 命名規則

id與class是前端最為常用的屬性，使用頻繁，且極為簡單。

由於上述特性，可能會造成它們名稱的濫用，從而導致各種各樣的不便，甚至出現較為嚴重的問題。

下面通過簡短程式碼介紹一下id與class屬性值在開發中比較推薦的命名規則。

一.屬性值內容：

屬性值只能是26個英文字母、數字和連字元（-），其他字元都不要出現，包括漢字。

推薦使用英文單詞，可以使用簡寫形式，但不要隨意創造簡寫形式，而是使用所熟知或者早就約定俗成的形式。如果實在找不到合適的英文單詞，可以使用漢語拼音替代，但是儘量少的使用，通常用於產品名稱與特定詞彙。

二.屬性值大小寫：

id與class屬性值推薦小寫形式，程式碼如下：

[HTML] 純文字檢視 複製程式碼
<!-- 推薦命名方式 -->
<div class="side"></div>
<!-- 不推薦命名方式 -->
<div class="Side"></div>

三.連字元的使用：

屬性值是多個單詞的合成時，推薦單詞之間使用連字元。

當然，屬性值字串依然推薦小寫形式：

[HTML] 純文字檢視 複製程式碼
<!-- 推薦命名方式 -->
<div class="side-bar"></div>
<!-- 不推薦命名方式 -->
<div class="side_bar"></div>

四.id屬性值不能重複：

文件中的id是必須不能重複，不但規範中這麼推薦，標準中也是如此硬性規定的。

雖然id屬性值重複，可能不會報錯，但是依然要禁止，防止出現意外情況。

五.class屬性用來設定樣式：

class屬性要做其本職工作，那就是設定元素的樣式。

而不是元素設定class屬性的目的，是為了通過JavaScript相關方法獲取此元素。

否則，可能會導致class屬性濫用的現象，通過id或者屬性選擇器結合JavaScript獲取元素是更為推薦。

六.屬性值要體現其功能：

屬性值的名稱要體現其功能，儘量做到見詞達意。

這對於其他開發人員閱讀程式碼或者後期維護有著重要意義。

特別說明：屬性值不能體現具體資料，而是體現功能。

[CSS] 純文字檢視 複製程式碼
.fw-800 {
  font-weight: 800;
}
  
.red {
  color: red;
}

上述程式碼並不符合規範，兩個class屬性值都體現了具體資料，因為資料是有可能發生改變的，假如顏色由red紅色修改為blue藍色，那麼不但CSS程式碼中的選擇器和具體的資料需要修改，HTML中的class屬性值也需要修改，否則就有可能誤導其他閱讀程式碼的人員，甚至寫程式碼的本人也會被誤導，明明選擇器的名稱是".red"，但是實際的顏色確實藍色，發生了什麼....，程式碼修改如下：

[CSS] 純文字檢視 複製程式碼
.heavy {
  font-weight: 800;
}
  
.important {
  color: red;
}

上述class屬性值的命名僅體現它的功能，與具體資料無關。