ID、Class 與屬性命名原則

因為 CSS 太容易上手，使用者在 ID 和 Class ( 類別 ) 的命名上，時常發生名稱不一致或隨便取名的狀況，這種沒有系統性的命名，往往造成後續不容易理解或嵌套順序錯亂，這篇教學會介紹一些常用又好理解的命名原則，透過這些命名原則，就能讓 CSS 寫得更加整齊漂亮又好維護。

快速導覽：

• 區分大小寫
• 多個單字的名稱組合方式
• 語意清楚
• 簡單扼要 ( 短命名 )
• 使用字首代碼
• 合法的命名字元

區分大小寫

由於 HTML 的 ID、Class 和屬性名稱只支援英文，因此就會產生區分英文字母大小的狀況，下表列出 CSS 選擇器區分大小寫的規範：

以下方的 CSS 為例，因為屬性數值區分大小寫，最後呈現的文字顏色就會是紅色。

/* <div name="oxxo">Hello World!!</div> 會呈現紅色 */
div[name="oxxo"] {color: red;}
div[name="OXXO"] {color: blue;}

多個單字的名稱組合方式

ID、Class 和屬性對於「多個單字」的命名原則並不相同，下表列出一些差異：

由於網頁使用的 JavaScript 語言可以直接讀取 ID 作為變數使用，所以 ID 的命名通常會按照「小駝峰式命名法 ( lower camel case )」命名，這種命名法的第一個字母為小寫，後續每個單字的字首大寫。

<h1 id="myNameIsOxxo">OXXO</h1>
<h2 id="helloWorldEveryone">Hello World!!</h2>

Class 的命名通常使用「-」連接多個單字，全部單字都是小寫，如果使用 JavaScript 讀取後會再利用小駝峰式命名法建立對應的變數。

<h1 class="my-name-is-oxxo">OXXO</h1>
<h2 class="hello-world-everyone">Hello World!!</h2>

如果是 Attribute 屬性，通常會使用「data-」或「attr-」開頭，後續屬性使用「-」連接多個單字，或按照 Class 的命名原則進行命名 ( 屬性的數值因為是字串，就並沒有撰寫格式的限制 )，下方只是提供一個參考範例，通常屬性都會是一個或兩個單字，不會寫得這麼複雜。

<h1 attr-my-name-is-oxxo="oxxo">OXXO</h1>
<h2 hello-world-everyone="hello">Hello World!!</h2>

語意清楚

ID、Class 和屬性在命名時，盡可能讓名稱的「語意清楚」，也就是看到名稱就可以猜出這個 ID 或 Class 的意義，下方列出好與不好的命名，其中不好的命名，通常是看不出來這個名稱是在做什麼，或容易被其他的名稱互相嵌套。

• 如果是有意義或特有的名稱，且已經確認不會被其他 CSS 選擇器影響，則可以按照個人喜好使用。
• 避免使用單一字母或毫無意義的字母數字。

以下方的 HTML 使用了「很不好」的 Class 命名方式，不只名稱使用毫無意義的單一字母，不同的元素裡又有各自的 t 類別，這種做法在 CSS 選擇器的操作上，會變得複雜且容易出錯。

<h1 class="t">OXXO.STUDIO</h1>
<div>
  <h2 class="t">STEAM 教育學習網<h2>
</div>

簡單扼要 ( 短命名 )

在「語意清楚」的命名之餘，也盡量採用「短命名」的方式，也就是使用常見的「英文縮寫」進行命名，這種做法不僅可以減少 CSS 程式碼的大小，在閱讀上也更簡單清楚，下方列出一些常見的短命名：

使用字首代碼

如果開發的網頁專案較為龐大，通常會建立「字首代碼」區分「不同的」CSS，字首代碼常代表「某些特定功能或行為」的樣式，以知名的 Bootstrap 為例，如果是網格佈局的 class，往往會看見 col 為字首的命名。

<div class="container">
  <div class="row">
    <div class="col-md-4">oxxo1</div>
    <div class="col-md-4">oxxo2</div>
    <div class="col-md-4">oxxo3</div>
  </div>
</div>

字首代碼除了區分功能，往往也作為「區分不同的套件」使用，例如 Pure CSS 這套 CSS 框架，就會使用 pure- 開頭表現自己的 CSS 樣式。

<div class="pure-g">
    <div class="pure-u-1-3"><p>oxxo1</p></div>
    <div class="pure-u-1-3"><p>oxxo2</p></div>
    <div class="pure-u-1-3"><p>oxxo3</p></div>
</div>

合法的命名字元

標準的合法命名字元只有：英文字母大小寫、數字、連接線「-」和底線「_」，除了「數字不能當作字首」，英文字母、連接線和底線都能當作自首代碼使用，甚至有時會出現兩個連接線「--」或兩個底線「__」的寫法。下方的命名範例都是合法且常用的：

除了標準的合法字元，如果使用中文字、中文標點符號或 emoji 基本上也合法，但為了避免在不同語系瀏覽器出現編碼問題，仍然不建議使用，至於其他沒有列出的 ASCII 字元 ( 例如：,、.、%...等 )，因為常與功能衝突，通常都是不合法的，雖然可以使用跳脫字元「\」的方式處理，但在閱讀和管理上都不容易理解且容易出錯，因此都不建議使用。

小結

俗話說「好的命名原則帶你上天堂」( 我說的 )，好的命名不只容易理解，對於複雜的 CSS 樣式表更為重要，如果能夠一目瞭然的閱讀和管理，開發上也就更省時間也不容易出錯囉。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～