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 的命名規則

```text
    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/