CSS 部屬經驗-樣式命名

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

主旨：

1. 定義樣式的命名方式，區分 CSS 與 JavaScript 的使用
2. id , class , tag 等選擇器得使用時機
   

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

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

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

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


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

• id 選擇器：
  在 id 的使用上我分成[頁面排版]及[例外樣式]
  
  1. 頁面排版：排版是不會重複的樣式定義，而且必須擁有不容易被複寫的特性，使用 id 選擇器去定義樣式是在好不過的。
     
     常用的命名詞彙：
     

     Outer	外匡
     Container	容器
     Status	狀態
     Header	頁首
     Banner	頁面橫幅
     Nav/Navigation	領航
     Navbar	領航列
     Content/Container	內容
     Main	頁面主體
     Sidebar	側欄
     Footer	頁尾
     Wrapper	具有寬度定義的區塊

     
     
     
  2. 例外樣式：在頁面中具有特別需要美工修飾的樣式時，利用 id 選擇器去強制複寫原有樣式。
     這是為了特殊樣式而保留的彈性，但不建議經常性的使用，這樣就違反 CSS 樣式統一的特性，未來維護時只會帶來更多的不便。
     
     
  
  
• class 選擇器 ：
  在 class 的使用上我分成[樣式定義]及[元素類型]
  
  1. 樣式定義：樣式規劃上最主要的用途定義，去規劃所有可重複利用的樣式，例如：按鈕、列表、表單等區塊性的樣式。
     
     常用的命名詞彙：
     

     Summary	摘要
     Widget	工具集
     Toolbar	工具列
     Navbar	領航列
     Menu	項目單
     TextLink	文字連結列
     PageLink	頁面連結列
     Tab	頁籤
     Search	搜尋
     Form	表單
     List	列表
     TextList	文字列表
     ImageList	圖片列表
     Button	按鈕
     AreaBox	區塊匡
     InfoBox	資訊匡
     PageInfo	頁面資訊
     DropMenu	下拉選單
     heading/Title	標題
     SecDivide	區段標題

     
     
     
  2. 樣式成員名稱：在樣式編排時為了補 tag 不足(樣式成員)，利用 class 去定義內層的原件樣式。
     命名時可依據區塊在樣式裡的角色去取名。
     
     常用的命名詞彙：
     

     Title	標題
     Date	日期
     Buttons	按鈕群
     Bottom	底部
     Logo	網站標誌
     Image	圖片
     Action	動作
     status	狀態
     Content	內容
     Even	偶數
     Odd	奇數
     First	最前的
     List	最後的

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

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

參考頁面：
Last.fm
Wacanai.com