運用 CSS methodologies 去實現模塊化

1、什麼是 CSS methodologies

---

CSS methodologies，能夠理解成 設計模式，也能夠理解成 css 規範，市面使用狀況以下圖：

上圖來源：https://2019.stateofcss.com/technologies/

你可能在平常開發中並不會專門花時間去注意和了解 CSS methodologies，但隨着你經驗的積累，你可能會本身思考，或者閱讀別人的代碼、參考網上成熟的框架，這裏面都或多或少的蘊含了一些 css methodologies 的閃光點。而下面要介紹的幾種主流的 css methodologies，則能夠幫你作到很好的總結和梳理。

2、常見的 CSS methodologies

---

一、OOCSS

面向對象的 CSS（Object-Oriented CSS，簡稱 OOCSS ），由 Nicole Sullivan 於 2008 年提出，這基於她在雅虎的工做。

（1）規則

一、不要使用 ID 用 Class

直接使用class來設定樣式，這樣寫不僅是能夠增長語義，同時也下降css對html的依賴。

二、結構和樣式分離

雖然早期 html 和 css 實現告終構和樣式的分離，但 css 內部一樣存在兩種類型的樣式：

• 結構樣式（例如長寬、距離）

• 皮膚樣式（例如顏色、陰影）

因此 OOCSS 建議把這兩種樣式拆開。

好比有三種按鈕，白色的/綠色的/紅色的，可分別定義爲：

class="btn btn-default"

class="btn btn-green"

class="btn btn-red"

若是你真的有不少個具備紫色按鈕，則能夠建立一個單獨的紫色按鈕類。這樣能夠大大減小CSS代碼的數量。

三、容器和內容分離

內容毫不應該限制於特定的容器，爲了重用，得分離開。

# 錯誤寫法
.header .action {
}
.header .action .login {
}
.header .action .register {
}

# 正確寫法
.header{
}
.action{
}
.login {
}
.register {
}

繼承選擇符是有用的，它能夠減小因相同命名引起的樣式衝突（常發生於多人協做開發）。可是，咱們不該過分使用。

（2）利弊

好處：

• 模塊化，可重用

• 減小代碼重複

• 提升可拓展性、可維護性、可讀性

缺點：

• 雖減小了深層的嵌套選擇器，可是多了更多的類

• 若是代碼中沒有大量重複的視覺模式，好比一些小項目，則應用OOCSS可能不切實際

（3）實例

Bootstrap 就是用的 OOCSS。

例如：

html

    <div class='header'>
        <ul class='menu'> 
            <li class='menu-item active'>1</li>
            <li class='menu-item'>2</li>
            <li class='menu-item'>3</li>
        </ul>
        <div class="action">
            <button class="btn btn-login">login</button>
            <button class="btn btn-register">register</button>
        </div>
    </div>

css：

.header {
}
.menu {
}
.menu-item {
}
.item.active {
}
.action {
}
.btn {
}
.btn-login {
}
.btn-register{
}

二、BEM

BEM - Block Element Modfier（塊元素編輯器）。誕生於2009年。

（1）內容

BEM 包括三個：

• Block - 塊，如 header

• Element - 子元素，如 塊menu 下的 item

• Modfier - 狀態，如.current、.active

（2）規則

一、命名規範

• -中劃線 ：僅做爲連字符使用，表示某個塊或者某個子元素的多單詞之間的鏈接記號。

• __ 雙下劃線：用來鏈接塊和塊的子元素。

• -- 雙中劃線：用來描述一個塊或者塊的子元素的一種狀態。

  在某些公司（如騰訊）的規範裏，雙中劃線被單下劃線（_）替代。

例如：.block-name__element--modifier

demo - html：

<div class='header'>
        <ul class='header__menu'> 
            <li class='header__menu-item--active'>1</li>
            <li class='header__menu-item'>2</li>
            <li class='header__menu-item'>3</li>
        </ul>
        <div class="header__action">
            <button class="header__btn--login">login</button>
            <button class="header__btn--register">register</button>
        </div>
    </div>

demo - less:

.header {
    &__menu {}
    &__menu-item {}
    &__action {}
    &__btn {  
        &--login {}
        &--register {}
    }    
}

二、避免嵌套

BEM 最多隻有 B+E+M 三級。

因此請避免 .block__el1__el2 的格式，直接改成 .block_el2。

這裏的 block 就很像命名空間了。

（3）利弊

好處：

• 層級關係一目瞭然，具備可讀性

• 不須要依靠層級選擇器來限定約束做用域，可避免跨組件的樣式污染。

缺點：

• 命名方式長而難看，書寫不便（能夠經過 less/sass 來簡化書寫）

• 在較小的組件中，BEM 格式可能顯得雞肋。但對於公共的、全局性的模塊樣式定義，仍是推薦使用 BEM 格式。（尤爲對外發布的公共組件）

其餘：

BEM 命名會使得 Class 類名變長，但通過 gzip 壓縮後這個帶寬開銷能夠忽略不計。

BEM是不容許用標籤選擇器的，哪怕最簡單的 li 也得寫成 .menu-item。

（4）實踐

餓了麼的框架elementUI就是BEM的一種，或者你也能夠研究網站company.yandex.ru/。

三、SMACSS

SMACSS（Scalable & Modular Architecture CSS ，即 CSS 的可擴展性和模塊化架構）。Jonathan Snook 於 2011 年提出，當時他在雅虎工做，爲 Yahoo Mail 編寫 CSS。

（1）規則

一、Categorizing CSS Rules（CSS 分類規則）

它將 CSS 分爲5個不一樣的類別：

• Base 基本規範

  例如 CSS Reset 和 CSS Normalize。

• Layout 佈局規範

  例如左右分欄、柵格系統。

• Module 模塊

  例如一個產品列表，一個導航條。可重用。

• State 狀態規範

  例如選中狀態。

• Theme 樣式規範

二、Naming Rules（命名規則）

爲類名添加前綴：

• Base 不須要前綴。並且是用標籤而不是 class 和 ID。
• l- 用做 Layout 的前綴：l-inline
• m- 用做 Module 的前綴：m-callout。但也能夠不用前綴。
• is- 用做 State 的前綴：is-collapsed
• Theme 通常會新建個 theme.css，用以前存在的類名。若是想用單獨的類名，可用 theme- 前綴。

例子：

<div class="l-box m-profile m-profile--is-pro-user">
  <img class="m-avatar m-profile__image" />
  <p class="m-profile__bio">...</p>
</div>

（2）實例

在線 demo：https://codepen.io/savemuse/pen/gWVpvd

四、 Atomic CSS

Atomic CSS 也是雅虎提出的，能夠從字面意思理解成原子 CSS。

（1）示例

<div className="P(10px) M(20%) Pos(f) Start(50%) Bgc(#fff)" />

會有專門的 Atomic css 工具，幫助將上面 html 中的 class name 解析成正常的 css。（略）

（2）利弊

好處：將 CSS style 最小元件化，重用性最大化。

壞處：這根本就是在寫 inline-style，只是咱們用 class name 的方式來表示而已。

（3）總結

這種作法真的很激進。我暫時沒法接受。

3、總結

---

拋開激進的Atomic，我對剩下的 OOCSS / BEM / SMACSS 有以下建議：

• 他們各自的思想有互補也有衝突，在實際開發中能夠有取捨的使用

• 他們均可以結合 CSS 預處理器（如 less/sass ）得到更好的效率

• 把上文分別介紹他們的好處列舉在一塊兒對比彙總，發現他們解決的核心問題就是：模塊化