模組組織
模組組織
任何超過1000 行的CSS 程式碼,你都曾經歷過這樣的體驗:
1.這個class 到底是什麼意思呢?
2.這個 class 在哪裡被使用呢?
3.如果我建立一個 xxoo
class,會造成衝突嗎?
Reasonable System for CSS Stylesheet Structure
的目標是解決上述問題,它不是框架,而是透過規範,讓你建立更健全且可維護的 CSS 程式碼。
Components(元件)
從 Components
的角度思考,將網站的模組都當作一個獨立的 Components
。
Naming components (元件命名)
Components
最少以兩個單字命名,透過 -
分離,例如:
- 按讚按鈕(
.like-button
) - #搜尋方塊(
.search-form
) - 文章卡(
.article-card
)
Elements (元素)
Elements
是Components
中的元素
Naming elements (元素命名)
Elements
的類別名稱應盡可能只有一個單字。
.search-form { > .field { /* ... */ } > .action { /* ... */ } }
On multiple words (多個單字)
對於倘若需要兩個或以上單字表達的 Elements
類別名,不應使用中劃線和底線連接,應直接連接。
.profile-box { > .firstname { /* ... */ } > .lastname { /* ... */ } > .avatar { /* ... */ } }
Avoid tag selectors (避免標籤選擇器)
#任何時候盡可能使用 classnames
。標籤選擇器在使用上沒有問題,但是其效能上稍弱,且表意不明確。
.article-card { > h3 { /* ✗ avoid */ } > .name { /* ✓ better */ } }
Variants (變體)
Components
和 #Elements
可能都會擁有 Variants
。
Naming variants (變體命名)
Variants
的 classname
應有前綴中劃線 #-
.like-button { &.-wide { /* ... */ } &.-short { /* ... */ } &.-disabled { /* ... */ } }
Element variants (元素變體)
.shopping-card { > .title { /* ... */ } > .title.-small { /* ... */ } }
Dash prefixes (中劃線前綴)
為什麼使用中劃線作為變體的前綴?
- 它可以避免歧義與
Elements
- CSS class 只能以單字和
_
或-
開頭 - 中劃線比底線更容易輸出
Layout (佈局)
Avoid positioning properties (避免定位屬性)
Components 應該在不同的上下文中都可以重複使用,所以應避免設定以下屬性:
Positioning (position, top, left, right, bottom)
Floats (float, clear)
#Margins (margin)
Dimensions (width, height) *
Fixed dimensions (固定尺寸)
頭像和logos 這些元素應該設定固定尺寸(寬度,高度...)。
Define positioning in parents (在父元素中設定定位)
倘若你需要為元件設定定位,應將在元件的上下文(父元素)中處理,例如以下範例中,將 widths
和 floats
應用在 list component(.article-list)
當中,而不是 component(.article-card)
自身。
.article-list { & { @include clearfix; } > .article-card { width: 33.3%; float: left; } } .article-card { & { /* ... */ } > .image { /* ... */ } > .title { /* ... */ } > .category { /* ... */ } }
Avoid over-nesting (避免過度嵌套)
當出現多個嵌套的時候容易失去控制,應保持不超過一個嵌套。
/* ✗ Avoid: 3 levels of nesting */ .image-frame { > .description { /* ... */ > .icon { /* ... */ } } } /* ✓ Better: 2 levels */ .image-frame { > .description { /* ... */ } > .description > .icon { /* ... */ } }
Apprehensions (顧慮)
#中劃線
-
是一坨糟糕的玩意:其實你可以選擇性的使用,只要將Components, Elements, Variants
記在心上即可。我有時候想不出兩個字唉:有些組件的確使用一個字就能表意,例如 aleter 。但其實你可以使用後綴,讓意識更明確。
例如區塊級元素:
#.alert-box
.alert -card
.alert-block
#或行內級元素
- ##.link-button
- .link-span
- #以
Components
的角度思考,以兩個單字命名(
.screenshot-image)
Components
中的
Elements,以一個單字命名(
.blog -post .title)
Variants
,以中劃線-作為前綴(
.shop-banner.-with-icon#)
Components
可以互相巢狀
記住,你可以透過繼承讓事情變得更簡單
- #*