Skip to content

Instantly share code, notes, and snippets.

@zbryikt

zbryikt/css-guideline.md

Last active February 24, 2024 07:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zbryikt/05c62543df8039b571d5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zbryikt/05c62543df8039b571d5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. zbryikt revised this gist Dec 17, 2014. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -43,6 +43,9 @@ CSS 命名 / 架構規範上的幾個大方向
    - 例如 ``` <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)

    參考連結
    ------------------
  2. zbryikt revised this gist Dec 17, 2014. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -42,4 +42,8 @@ CSS 命名 / 架構規範上的幾個大方向
    * 減少使用 html selector, 除非與架構綁定(強迫用ul/li), 或是語意明顯 (navbar,article, ... )
    - 例如 ``` <div><span/><span/><span/></div></pre>``` 下若用 div > span, 就沒辦法區分三個 span 了
    * 可使用 suitcss 搭配 stylus, stylus 提供更強大的編譯方式, suitcss 協助及測試完善架構
    - 不過這樣就要遵守 suitcss 的命名規則了
    - 不過這樣就要遵守 suitcss 的命名規則了

    參考連結
    ------------------
    * http://www.sitepoint.com/css-sass-styleguide/
  3. zbryikt revised this gist Dec 16, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -40,6 +40,6 @@ CSS 命名 / 架構規範上的幾個大方向
    * 原則上不使用 !important, !important 使用時機在精確描述物件時.
    - 例如名為 hidden 的 class, 就很適合用 !important 來修飾 display:none, 以避免被其它的 class 蓋過定義.
    * 減少使用 html selector, 除非與架構綁定(強迫用ul/li), 或是語意明顯 (navbar,article, ... )
    - 例如 ``` <div><span/><span/><span/></div></pre> 下若用 div > span, 就沒辦法區分三個 span 了 ```
    - 例如 ``` <div><span/><span/><span/></div></pre>``` 下若用 div > span, 就沒辦法區分三個 span 了
    * 可使用 suitcss 搭配 stylus, stylus 提供更強大的編譯方式, suitcss 協助及測試完善架構
    - 不過這樣就要遵守 suitcss 的命名規則了
  4. zbryikt revised this gist Dec 16, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -40,6 +40,6 @@ CSS 命名 / 架構規範上的幾個大方向
    * 原則上不使用 !important, !important 使用時機在精確描述物件時.
    - 例如名為 hidden 的 class, 就很適合用 !important 來修飾 display:none, 以避免被其它的 class 蓋過定義.
    * 減少使用 html selector, 除非與架構綁定(強迫用ul/li), 或是語意明顯 (navbar,article, ... )
    - ```text 例如 <div><span/><span/><span/></div></pre> 下若用 div > span, 就沒辦法區分三個 span 了 ```
    - 例如 ``` <div><span/><span/><span/></div></pre> 下若用 div > span, 就沒辦法區分三個 span 了 ```
    * 可使用 suitcss 搭配 stylus, stylus 提供更強大的編譯方式, suitcss 協助及測試完善架構
    - 不過這樣就要遵守 suitcss 的命名規則了
  5. zbryikt revised this gist Dec 16, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,7 @@ CSS 命名 / 架構規範上的幾個大方向
    * 不要使用 !important
    * 原則上不使用 !important, !important 使用時機在精確描述物件時.
    - 例如名為 hidden 的 class, 就很適合用 !important 來修飾 display:none, 以避免被其它的 class 蓋過定義.
    * 減少使用 html selector, 除非與架構綁定(強迫用ul/li), 或是語意明顯 (b,a)
    > 例如 <div><span/><span/><span/></div></pre> 下若用 div > span, 就沒辦法區分三個 span 了
    * 減少使用 html selector, 除非與架構綁定(強迫用ul/li), 或是語意明顯 (navbar,article, ... )
    - ```text 例如 <div><span/><span/><span/></div></pre> 下若用 div > span, 就沒辦法區分三個 span 了 ```
    * 可使用 suitcss 搭配 stylus, stylus 提供更強大的編譯方式, suitcss 協助及測試完善架構
    - 不過這樣就要遵守 suitcss 的命名規則了
  6. zbryikt revised this gist Dec 16, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -40,6 +40,6 @@ CSS 命名 / 架構規範上的幾個大方向
    * 原則上不使用 !important, !important 使用時機在精確描述物件時.
    - 例如名為 hidden 的 class, 就很適合用 !important 來修飾 display:none, 以避免被其它的 class 蓋過定義.
    * 減少使用 html selector, 除非與架構綁定(強迫用ul/li), 或是語意明顯 (b,a)
    - 例如: <pre><div><span/><span/><span/></div></pre> 下若用 div > span, 就沒辦法區分三個 span 了
    > 例如 <div><span/><span/><span/></div></pre> 下若用 div > span, 就沒辦法區分三個 span 了
    * 可使用 suitcss 搭配 stylus, stylus 提供更強大的編譯方式, suitcss 協助及測試完善架構
    - 不過這樣就要遵守 suitcss 的命名規則了
  7. zbryikt revised this gist Dec 16, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -40,6 +40,6 @@ CSS 命名 / 架構規範上的幾個大方向
    * 原則上不使用 !important, !important 使用時機在精確描述物件時.
    - 例如名為 hidden 的 class, 就很適合用 !important 來修飾 display:none, 以避免被其它的 class 蓋過定義.
    * 減少使用 html selector, 除非與架構綁定(強迫用ul/li), 或是語意明顯 (b,a)
    - 例如: <div><span/><span/><span/></div> 下若用 div > span, 就沒辦法區分三個 span 了
    - 例如: <pre><div><span/><span/><span/></div></pre> 下若用 div > span, 就沒辦法區分三個 span 了
    * 可使用 suitcss 搭配 stylus, stylus 提供更強大的編譯方式, suitcss 協助及測試完善架構
    - 不過這樣就要遵守 suitcss 的命名規則了
  8. zbryikt revised this gist Dec 16, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -37,6 +37,8 @@ CSS 命名 / 架構規範上的幾個大方向
    其它要點
    * 控制變異性 - 比如說字體大小, 整個網站有3~4種固定的大小就很足夠了, 太多看不出差異.
    * 不要使用 !important
    * 原則上不使用 !important, !important 使用時機在精確描述物件時.
    - 例如名為 hidden 的 class, 就很適合用 !important 來修飾 display:none, 以避免被其它的 class 蓋過定義.
    * 減少使用 html selector, 除非與架構綁定(強迫用ul/li), 或是語意明顯 (b,a)
    - 例如: <div><span/><span/><span/></div> 下若用 div > span, 就沒辦法區分三個 span 了
    * 可使用 suitcss 搭配 stylus, stylus 提供更強大的編譯方式, suitcss 協助及測試完善架構
  9. zbryikt revised this gist Dec 16, 2014. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,7 @@
    CSS 命名 / 架構規範上的幾個大方向
    ========

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

    1. 分類 (smacss)
    base - 基本元件, like, a, b, img, 最基礎的屬性, 可能在任何場合被使用
  10. zbryikt revised this gist Dec 16, 2014. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -22,8 +22,10 @@ CSS 命名 / 架構規範上的幾個大方向
    Block__Element_Modifier 用底線來區分 (BEM)
    * 可參考 suitcss 的命名規則

    <pre> u-[sm|md|lg]-<utility> (例: .u-sm-avatar)</pre>
    <pre> [<namespace>-]<component>[--<modifier>|-<descendent>] (例: twt-tweet--active)</pre>
    ```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
  11. zbryikt revised this gist Dec 16, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -22,8 +22,8 @@ CSS 命名 / 架構規範上的幾個大方向
    Block__Element_Modifier 用底線來區分 (BEM)
    * 可參考 suitcss 的命名規則

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

    * ACSS - 直接利用 class 代表特定樣式. e.g., fl -> float:left, db: display:block
    - 缺點: sucks in media query
  12. zbryikt revised this gist Dec 16, 2014. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -22,8 +22,9 @@ CSS 命名 / 架構規範上的幾個大方向
    Block__Element_Modifier 用底線來區分 (BEM)
    * 可參考 suitcss 的命名規則

    u-[sm|md|lg]-<utility> (例: .u-sm-avatar)
    [<namespace>-]<component>[--<modifier>|-<descendent>] (例: twt-tweet--active)
    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 做法搭配才會真正實用
  13. zbryikt revised this gist Dec 16, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -21,6 +21,7 @@ CSS 命名 / 架構規範上的幾個大方向
    * 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
  14. zbryikt revised this gist Dec 16, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions css-guideline.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@ CSS 命名 / 架構規範上的幾個大方向

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

    3. 平面化階層 (減低 specificify: http://specificity.keegan.st/ )
    @@ -21,8 +21,8 @@ CSS 命名 / 架構規範上的幾個大方向
    * BEM 將區塊切分: Block (模組,如選單) / Element (零件,如選項) / Modifier (狀態,如選取)
    Block__Element_Modifier 用底線來區分 (BEM)
    * 可參考 suitcss 的命名規則
    u-[sm|md|lg]-<utility> (例: .u-sm-avatar)
    [<namespace>-]<component>[--<modifier>|-<descendent>] (例: twt-tweet--active)
    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 做法搭配才會真正實用
  15. zbryikt renamed this gist Dec 16, 2014. 1 changed file with 0 additions and 0 deletions.
    0 css-guideline → css-guideline.md
    View file
    File renamed without changes.
  16. zbryikt created this gist Dec 16, 2014.
    36 changes: 36 additions & 0 deletions css-guideline
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    CSS 命名 / 架構規範上的幾個大方向

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

    2. 屬性分類架構 (oocss)
    * 分離結構與外觀 ( e.g., size v.s. color )
    * 分離容器與內容 ( .container: .content {{blah..}} )
    * 共用部份結合成上層類別 (同樣大小但不同顏色 - 大小一個, 顏色兩個)

    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
    * 減少使用 html selector, 除非與架構綁定(強迫用ul/li), 或是語意明顯 (b,a)
    - 例如: <div><span/><span/><span/></div> 下若用 div > span, 就沒辦法區分三個 span 了
    * 可使用 suitcss 搭配 stylus, stylus 提供更強大的編譯方式, suitcss 協助及測試完善架構
    - 不過這樣就要遵守 suitcss 的命名規則了