任何超過 1000 行的 CSS 代碼，你都曾經(jīng)歷過這樣的體驗(yàn)：
- 這個(gè) class 到底是什么意思呢湿滓？
- 這個(gè) class 在哪里被使用呢滴须？
- 如果我創(chuàng)建一個(gè)
xxooclass，會(huì)造成沖突嗎叽奥？
Reasonable System for CSS Stylesheet Structure 的目標(biāo)就是解決以上問題扔水，它不是一個(gè)框架，而是通過規(guī)范朝氓，讓你構(gòu)建更健壯和可維護(hù)的 CSS 代碼魔市。
Components（組件）
從 Components 的角度思考，將網(wǎng)站的模塊都作為一個(gè)獨(dú)立的 Components赵哲。
Naming components （組件命名）
Components 最少以兩個(gè)單詞命名待德，通過 - 分離，例如：
- 點(diǎn)贊按鈕 (
.like-button) - 搜索框 (
.search-form) - 文章卡片 (
.article-card)
Elements （元素）
Elements 是 Components 中的元素
Naming elements （元素命名）
Elements 的類名應(yīng)盡可能僅有一個(gè)單詞枫夺。
.search-form {
> .field { /* ... */ }
> .action { /* ... */ }
}
On multiple words （多個(gè)單詞）
對(duì)于倘若需要兩個(gè)或以上單詞表達(dá)的 Elements 類名将宪，不應(yīng)使用中劃線和下劃線連接，應(yīng)直接連接。
.profile-box {
> .firstname { /* ... */ }
> .lastname { /* ... */ }
> .avatar { /* ... */ }
}
Avoid tag selectors （避免標(biāo)簽選擇器）
任何時(shí)候盡可能使用 classnames涧偷。標(biāo)簽選擇器在使用上沒有問題簸喂，但是其性能上稍弱，并且表意不明確燎潮。
.article-card {
> h3 { /* ? avoid */ }
> .name { /* ? better */ }
}
Variants （變體）
Components 和 Elements 可能都會(huì)擁有 Variants喻鳄。
Naming variants （變體命名）
Variants 的 classname 應(yīng)帶有前綴中劃線 -
.like-button {
&.-wide { /* ... */ }
&.-short { /* ... */ }
&.-disabled { /* ... */ }
}
Element variants （元素變體）
.shopping-card {
> .title { /* ... */ }
> .title.-small { /* ... */ }
}
Dash prefixes （中劃線前綴）
為什么使用中劃線作為變體的前綴？
- 它可以避免歧義與
Elements - CSS class 僅能以單詞和
_或-開頭 - 中劃線比下劃線更容易輸出
Layout （布局）
Avoid positioning properties （避免定位屬性）
Components 應(yīng)該在不同的上下文中都可以復(fù)用确封，所以應(yīng)避免設(shè)置以下屬性：
- Positioning (position, top, left, right, bottom)
- Floats (float, clear)
- Margins (margin)
- Dimensions (width, height) *
Fixed dimensions （固定尺寸）
頭像和 logos 這些元素應(yīng)該設(shè)置固定尺寸（寬度除呵，高度...）。
Define positioning in parents （在父元素中設(shè)置定位）
倘若你需要為組件設(shè)置定位爪喘，應(yīng)將在組件的上下文（父元素）中進(jìn)行處理颜曾，比如以下例子中，將 widths 和 floats 應(yīng)用在 list component(.article-list) 當(dāng)中秉剑，而不是 component(.article-card) 自身泛豪。
.article-list {
& {
@include clearfix;
}
> .article-card {
width: 33.3%;
float: left;
}
}
.article-card {
& { /* ... */ }
> .image { /* ... */ }
> .title { /* ... */ }
> .category { /* ... */ }
}
Avoid over-nesting （避免過分嵌套）
當(dāng)出現(xiàn)多個(gè)嵌套的時(shí)候容易失去控制，應(yīng)保持不超過一個(gè)嵌套侦鹏。
/* ? Avoid: 3 levels of nesting */
.image-frame {
> .description {
/* ... */
> .icon {
/* ... */
}
}
}
/* ? Better: 2 levels */
.image-frame {
> .description { /* ... */ }
> .description > .icon { /* ... */ }
}
Apprehensions （顧慮）
-
中劃線
-是一坨糟糕的玩意：其實(shí)你可以選擇性的使用诡曙，只要將Components, Elements, Variants記在心上即可。 -
我有時(shí)候想不出兩個(gè)單詞唉：有些組件的確使用一個(gè)單詞就能表意略水，比如
aleter价卤。但其實(shí)你可以使用后綴，使其意識(shí)更加明確渊涝。
比如塊級(jí)元素：
- .alert-box
- .alert-card
- .alert-block
或行內(nèi)級(jí)元素
- .link-button
- .link-span
Terminologies （術(shù)語）
RSCSS 與其他 CSS 模塊組織系統(tǒng)相似的概念
| RSCSS | BEM | SMACSS |
|---|---|---|
| Component | Block | Module |
| Element | Element | ? |
| Layout | ? | Layout |
| Variant | Modifier | Theme & State |
Summary （總結(jié)）
- 以
Components的角度思考慎璧，以兩個(gè)單詞命名（.screenshot-image） -
Components中的Elements，以一個(gè)單詞命名（.blog-post .title） -
Variants跨释，以中劃線-作為前綴（.shop-banner.-with-icon） -
Components可以互相嵌套 - 記住胸私，你可以通過繼承讓事情變得更簡(jiǎn)單
