模組組織
模組組織
任何超過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
可以互相巢狀記住，你可以透過繼承讓事情變得更簡單
- #*
