Jax 的工作紀錄: CSS 部屬經驗-樣式命名

為了 IE6 的相容這裡我不會用太新穎的選擇器，希望有一天 IE6 的使用群可以消失，這樣在排版時可以不去顧慮 IE6 的問題。

主旨：

為什麼要定義定義樣式的命名方式？
CSS 在選擇器的宣告上十分自由，但為了讓其他人也能順利的閱讀自己寫的樣式，定義一個有規則的命名方式，可以減少不必要的誤會跟問題。

這裡我自己作了命名的定義：

CSS 命名規則：
1. 單字開頭大寫，不使用底線（_）間隔，除最後的數字代號前（.Style_1）
2. 除特定版型架構命名，不得以 id 方式宣告樣式，唯一樣式才可以使用 id 命名（#SidebarWrapperLeft）
3. 所有可沿用的樣式都才採用 class 方式宣告
JS 命名規則：
1. 所有單字小寫，使用底線（_）間隔（action_bt）
2. 與 JS 元素獲取相關命名均不可帶有樣式屬性

雖然有 CSS , JS 及 HTML 樣版可以將程式與美工的部分分離，但在 HTML 架構的規劃上仍需要協同開發，為區分樣式與 JS 的程式操作最好是將命名規則分開。

如何去決定選擇器的使用？

id 選擇器：
在 id 的使用上我分成[頁面排版]及[例外樣式]

頁面排版：排版是不會重複的樣式定義，而且必須擁有不容易被複寫的特性，使用 id 選擇器去定義樣式是在好不過的。

常用的命名詞彙：

例外樣式：在頁面中具有特別需要美工修飾的樣式時，利用 id 選擇器去強制複寫原有樣式。
這是為了特殊樣式而保留的彈性，但不建議經常性的使用，這樣就違反 CSS 樣式統一的特性，未來維護時只會帶來更多的不便。

class 選擇器：
在 class 的使用上我分成[樣式定義]及[元素類型]

樣式定義：樣式規劃上最主要的用途定義，去規劃所有可重複利用的樣式，例如：按鈕、列表、表單等區塊性的樣式。

常用的命名詞彙：

tag (HTML 標籤)選擇器：
在 tag 的使用上我分成[限制樣式對象]及[樣式成員]
1. 限制樣式對象：在樣式選擇器前加入可使用此樣式的tag(HTML 標籤)，去區別可使用此樣式的元素。
2. 樣式成員：在樣式定義結構中所使用到的 tag，別太依賴 tag 去定義樣式，在 HTML 中的 tag 是有限的，適時的用 class 去區別樣式成員。
  判斷方式，當子節點超過 2 層或同類 tag 超過一個以上時，最好使用樣式成員名稱的 class 命名去增加樣式成員

在這些定義中可能還是很模糊，在之後的文章中會介紹如何去規劃樣式，在那些範例中會使用到上面的規則，應該會比較容易瞭解。

參考頁面：
Last.fm
Wacanai.com

Jax 的工作紀錄