2009-07-20

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

0 回應: