CSS 命名 / 架構規範上的幾個大方向

參考: OOCSS, SMACSS, BEM, AMCSS, SUITCSS, ACSS

1. 分類 (smacss) base - 基本元件, like, a, b, img, 最基礎的屬性, 可能在任何場合被使用 layout - 整個網站的大架構 module - 功能性元件, 比方說選單 state - 狀態指示, 像是 打開 / 關上 / 等待中 theme - 負責整體的 feels and looks

2. 屬性分類架構 (oocss)

• 分離結構與外觀 ( e.g., size v.s. color )
• 分離容器與內容 ( .container: .content 內容文字... )
• 共用部份結合成上層類別 (同樣大小但不同顏色 - 大小一個, 顏色兩個)

3. 平面化階層 (減低 specificify: http://specificity.keegan.st/ )

• 盡可能將樣式選擇器扁平化, 可最大化共用性跟減低複雜度

4. 命名建議

• 使用語意: 與其用 text-red, 不如用 text-danger (oocss)
• 名稱擴展: 追加屬性時, 延伸原來的名稱, 例: .comment 與 .comment.comment-best (oocss)
• BEM 將區塊切分: Block (模組,如選單) / Element (零件,如選項) / Modifier (狀態,如選取) Block__Element_Modifier 用底線來區分 (BEM)
• 可參考 suitcss 的命名規則

    u-[sm|md|lg]-<utility>   (例: .u-sm-avatar)
    [<namespace>-]<component>[--<modifier>|-<descendent>] (例: twt-tweet--active)

• ACSS - 直接利用 class 代表特定樣式. e.g., fl -> float:left, db: display:block
  • 缺點: sucks in media query
  • 仍然是與 semantic 做法搭配才會真正實用

其它要點

• 控制變異性 - 比如說字體大小, 整個網站有3~4種固定的大小就很足夠了, 太多看不出差異.
• 不要使用 !important
• 原則上不使用 !important, !important 使用時機在精確描述物件時.
  • 例如名為 hidden 的 class, 就很適合用 !important 來修飾 display:none, 以避免被其它的 class 蓋過定義.
• 減少使用 html selector, 除非與架構綁定(強迫用ul/li), 或是語意明顯 (navbar,article, ... )
  • 例如 <div><span/><span/><span/></div></pre> 下若用 div > span, 就沒辦法區分三個 span 了
• 可使用 suitcss 搭配 stylus, stylus 提供更強大的編譯方式, suitcss 協助及測試完善架構
  • 不過這樣就要遵守 suitcss 的命名規則了
• z-index 可用 sass 的 index() 維護元件間的相對位置, 例如:
  • $order: base, content, navbar
  • z-index: index($order, navbar)

參考連結

• http://www.sitepoint.com/css-sass-styleguide/