Skip to content

Instantly share code, notes, and snippets.

@zbryikt
Last active February 24, 2024 07:04
Show Gist options
  • Save zbryikt/05c62543df8039b571d5 to your computer and use it in GitHub Desktop.
Save zbryikt/05c62543df8039b571d5 to your computer and use it in GitHub Desktop.
CSS 開發規範與心法整理

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 內容文字... )
  • 共用部份結合成上層類別 (同樣大小但不同顏色 - 大小一個, 顏色兩個)
  1. 平面化階層 (減低 specificify: http://specificity.keegan.st/ )
  • 盡可能將樣式選擇器扁平化, 可最大化共用性跟減低複雜度
  1. 命名建議
  • 使用語意: 與其用 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)

參考連結

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment