參考: OOCSS, SMACSS, BEM, AMCSS, SUITCSS, ACSS
-
分類 (smacss) base - 基本元件, like, a, b, img, 最基礎的屬性, 可能在任何場合被使用 layout - 整個網站的大架構 module - 功能性元件, 比方說選單 state - 狀態指示, 像是 打開 / 關上 / 等待中 theme - 負責整體的 feels and looks
-
屬性分類架構 (oocss)
- 分離結構與外觀 ( e.g., size v.s. color )
- 分離容器與內容 ( .container: .content 內容文字... )
- 共用部份結合成上層類別 (同樣大小但不同顏色 - 大小一個, 顏色兩個)
- 平面化階層 (減低 specificify: http://specificity.keegan.st/ )
- 盡可能將樣式選擇器扁平化, 可最大化共用性跟減低複雜度
- 命名建議
- 使用語意: 與其用 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)