CSS 選擇器命名規範

良好的選擇器命名能夠給團隊合作和後期維護帶來便利。

對於大型專案尤其重要，可以在龐大繁雜的程式碼中，將元素的一些相關資訊傳達給開發人員。

本文將由淺入深分享一下比較科學的CSS選擇器命名規範。

一.選擇器名稱的構成：

首先強調一下，本文所介紹的命名規範，是最佳實踐，而不是標準的約束，沒有強制性。

選擇器名稱推薦由如下成分構成：

（1）.儘量使用英文字元。

（2）.一律採用小寫形式。

（3）.可以使用英文單詞的縮寫，但是必須是通用的縮寫形式，不要自己隨意創造。

（4）.如果名稱由多個單詞（或者縮寫）構成，使用中劃線連線，不推薦使用下劃線。

二.具體命名規則：

比如，一個專案中有大量input元素的應用，良好的選擇器命名，可以很容易識別出對應元素的功能。

看如下程式碼例項：

[CSS] 純文字檢視 複製程式碼
.input-pw-login{
}

上述程式碼中，可以通過選擇器很輕鬆的識別出對應的input元素是登入密碼框。

CSS選擇器名稱構成：

[CSS] 純文字檢視 複製程式碼
[ 模組字首 ] - 型別 - ( 作用 | 狀態 ) n-[ 位置  ]n

首先介紹一下上述規則中特殊符號的意義：

（1）.[]：中括號表示內容可選。

（2）.-：中劃線表示名稱的連字元。

（3）.()：小括號表示內容是必須的。

（4）.|：豎線表示兩側的內容任選其一。

（5）.n：表示前面的內容可以有多個。

具體構成內容解析：

（1）.模組字首：頁面模組的命名。

（2）.型別 ：當前元素的型別，比如input型別。

（3）.作用：補充此元素充當的角色。

（4）.狀態 ：補充此元素當前的狀態，比如可用、不可用或者警告燈。

（5）.位置：選擇器應用的位置。

本文所指的模組就是頁面中一個功能區域，比如登陸區域，頭部區域，導航區域等。

下面舉一個例子，深化一下理解，假設我們有一個將要應用於detail頁面的搜尋框，分解如下：

（1）.input型別文字框，那麼以.input起始。

（2）.用於搜尋功能，於是再加上作用，.input-search。

（3）.應用於detail頁面，於是再加上位置，.input-search-detail。

三.最後強調說明：

上面的選擇器命名規範只是一家之言，沒必要完全遵守。

最好的規範就是自己活著團隊用著順手，便於開發，可以根據上面的規範進行自己的改進。

網上有很多對於模組等比較通用的命名推薦，本文不再介紹，可以自己查詢一下，然後按照上述規範組合。