摘要：由于年提出，這基于她在雅虎的工作。但是這很難做到解決的問題樣式全局性造成的樣式?jīng)_突問題多人協(xié)作的命名問題解決層疊問題，使的優(yōu)先級保持相對扁平的模塊化，使更具有復(fù)用的能力于年由提出，當(dāng)時他在雅虎工作。

其實CSS很好寫，只要知道css語法，你就可以寫出來，通過各種學(xué)習(xí)，你也可以做出一個很美麗的頁面。對能熟練編寫網(wǎng)頁的人來說，可以很簡單的將設(shè)計圖變成網(wǎng)頁。
但是在中型/大型項目中，你往往遇見的問題，并不是如何寫出一個網(wǎng)頁，而是：

在前端框架內(nèi)引入UI框架，是否能保證你的樣式與框架不產(chǎn)生沖突，怎么解決

是否能處理多人協(xié)作所產(chǎn)生的問題

怎么提高你的樣式的可維護(hù)性

你的樣式是否可以復(fù)用，怎么復(fù)用

能不能提升幸福感

甚至于個人，怎么讓你自己的代碼更優(yōu)雅，讓自己更有成長，而不是僅僅在寫代碼。

早在前幾年，社區(qū)就根據(jù)種種編寫CSS所遇到的問題，提出了一些方法論：

OOCSS
BEM
SMACSS
Atomic?CSS

社區(qū)內(nèi)最早提出的一種方法，也可以說是模塊化CSS的起源。由NicoleSullivan 于 2009 年提出，這基于她在雅虎的工作。

面向?qū)ο髮τ诤蠖碎_發(fā)人員可能較為熟悉，那么在CSS中的面向?qū)ο笫鞘裁矗?/p>

面向?qū)ο螅喊褦?shù)據(jù)及對數(shù)據(jù)的操作方法放在一起，作為一個相互依存的整體——對象。對同類對象抽象出其共性，形成類。類中的大多數(shù)數(shù)據(jù)，只能用本類的方法進(jìn)行處理。類通過一個簡單的外部接口與外界發(fā)生關(guān)系，對象與對象之間通過消息進(jìn)行通信。程序流程由用戶在使用中決定。

CSS中的對象是一個可復(fù)用的樣式規(guī)則。

Basically, a?CSS?“object” is a repeating visual pattern, that can be abstracted into an independent snippet of?HTML,?CSS, and possibly JavaScript. That object can then be reused throughout a site. 
 -- OOCSS wiki

舉個簡單的例子，我們在一個網(wǎng)站中，很多頁面都需要使用到按鈕，那么根據(jù)oocss的定義我們應(yīng)該怎么做？
在style中加入一個 btn 的類，之后網(wǎng)站內(nèi)全部的按鈕都使用這個樣式。這個 btn 就是一個對象。

按鈕

在例子中我們定義了一個 btn 的css類。那么這個css類就是一個對象。熟悉面向?qū)ο蟮呐笥芽隙ㄖ?，哦，我們把button這個對象封裝了。所以以后在網(wǎng)站中在使用按鈕，直接用 btn 這個類就可以了。

接下來我們來了解下，OOCSS包含了兩個原則：

容器與結(jié)構(gòu)分離（Separate container and content）

內(nèi)容與樣式分離（Separate structure and skin）

以及OOCSS的其他特點：

使用類名來擴(kuò)展基礎(chǔ)對象

堅持語義化的命名方式

通常在我們寫CSS的時候，我們通常會根據(jù)Html元素的位置來規(guī)定樣式，例如：

    

        
列表1
        
列表2
        
列表3
    

.nav ul li {...}

而在OOCSS認(rèn)為，我們的樣式不應(yīng)該根據(jù)元素的位置來判斷對象的樣式。
而是應(yīng)該給元素定義自己的樣式，如：

    

        
列表1
        
列表2
        
列表3
    

.list {...}
.list-item {...}

也就是說，在網(wǎng)頁中的任何位置使用 list ，我都不需要考慮 list 的上下文是什么，不論什么情況下 list 的樣式都不應(yīng)該改變。

現(xiàn)在我們就遇到了新問題，在之前我們定義了一個 btn 對象，現(xiàn)在我想要再網(wǎng)頁中加入一個紅色的按鈕怎么辦？
在學(xué)oocss之前我們可能說，在style改一下就好了，或者加一個紅顏色的對象就可以了；

.btn {
    padding: 4px 8px;
    background-color: #bbb;
    color: #fff;
}

.red-btn {
    padding: 4px 8px;
    background-color: red;
    color: #fff;
}

這樣修改的確是有一個紅色的按鈕，但是出現(xiàn)了什么問題？

我發(fā)現(xiàn)我寫兩遍的 padding: 4px 8px; 和 color: #fff;

拿我現(xiàn)在想要綠色、藍(lán)色、橙色的按鈕怎么辦，甚至我想要大一點的按鈕？

OOCSS提出了他的核心原則之一：內(nèi)容與樣式分離，他將對象設(shè)置為基本的樣式，而如果這個對象存在多種多樣的樣式，我們通過添加皮膚（skin）的方式給他添加樣式。

.btn{
   padding: 4px 8px;
   background-color: #bbb;
   color: #fff;
}

.red{
   background-color: red;
}

按鈕

這樣我們要的紅色按鈕就出爐了，你們想要的綠色、藍(lán)色等等等等愛要什么要什么...

那么在這個例子中，我們可以看到我們使用了一個紅色的按鈕，但是我們會發(fā)現(xiàn)一個問題，如果當(dāng)我們寫了一個label的時候我們想讓他的字體是紅色的，我們?nèi)绻蛔⒁?，樣式很有可能會沖突。

label按鈕
我是紅色的label

在OOCSS中，提倡將對象的皮膚使用其基礎(chǔ)類名來進(jìn)行拓展。

.btn {...}
.btn-red {...}
.label {...}
.label-red {...}

這樣我們一眼就可以看出，我們的擴(kuò)展樣式是對應(yīng)哪個對象的。也減少了樣式的沖突。

OOCSS還提倡使用語義化的命名方式，這樣有什么好處呢？我們可以根據(jù)名稱給皮膚定義使用場景，在特定場景使用特定的皮膚，這樣就不需要擔(dān)心在網(wǎng)站中胡亂使用顏色了。

.btn {...}
.btn-edit{  background-color: blue;}
.btn-delete{  background-color: red;}

如果對前端比較了解的同學(xué)可以發(fā)現(xiàn)，其實這個方法我們經(jīng)常能使用得到，大名鼎鼎的Bootstrap就是使用了這種方法。
這種方法就是讓你的CSS代碼更靈活、更具有可復(fù)用性、可維護(hù)行及可擴(kuò)展性。

BEM代表塊（Block），元素（Element），修飾符（Modifier）,由Yandex團(tuán)隊提出的一種前端命名方法論。
BEM是一種讓你可以快速開發(fā)網(wǎng)站并對此進(jìn)行多年維護(hù)的技術(shù)。    -- 早期描述
BEM是一種命名方法，能夠幫助你在前端開發(fā)中實現(xiàn)可復(fù)用的組件和代碼共享。

BEM是一個嚴(yán)格約定的命名規(guī)范，通過這種規(guī)范，來解決我們在編寫CSS是所遇到的問題。

BEM將網(wǎng)頁中的元素分為塊、元素、修飾符

/* 書寫規(guī)范 */
.block {...} /* 塊 塊名*/
.block__element {...} /* 元素 塊名 + __ + 元素名 */
.block--modifier {...} /* 修飾符 塊名 + -- + 元素名 */

.block 塊：代表了更高級別的抽象或組件

.block__element 元素：代表 .block 的后代，用于形成一個完整的.block的整體

.block--modifier 修飾符：代表 .block 的不同狀態(tài)或不同版本

我們可以將塊理解為web應(yīng)用中的組件或者模塊。
特點:

嵌套式的構(gòu)造
Block 可以被嵌套到任何其他 block 里面去。例如，一個頭部 header 可以包含一個 logo 、一個搜索表單 form 和一個登錄 login 。

隨意放置
Block 可以在一個頁面內(nèi)任意移動，也可以在頁面之間或項目之間移動。Block 作為獨立的實體來實現(xiàn)，這使得在頁面上改變 block 的位置 并確保其功能和外觀一切正常 成為可能。

可復(fù)用
一個界面可以包含同一個 block 的幾個實例。

大部分組件都不是由多層HTML嵌套組成的，那么元素就是就是這個組件內(nèi)部的各級元素。
這里需要注意的是，不論在HTML中一個塊的結(jié)構(gòu)是什么，在BEM規(guī)則中中，塊下的元素全部屬于塊。

    

        
列表1 ?
        
列表2 
        
列表3 
    

list-item 和 list-icon 都屬于塊 list 。

修飾符與在OOCSS中的皮膚比較類似，屬于組件在不同狀態(tài)或組件的不同版本。

一個塊必須有一個“名字”（一個CSS類）才能被CSS規(guī)則所使用

為什么不使用ID選擇器或元素選擇器？

類允許無限的重復(fù)使用，而ID在頁面中只允許使用一次

元素具有元素本身的意義，不應(yīng)該和組件互相產(chǎn)生影響

永遠(yuǎn)不要鏈?zhǔn)矫?br>在之前提到過，元素應(yīng)該只屬于塊，所以元素的命名只可能是 block--element 而不是 block--element1--element2

盡量避免子代選擇器

將樣式與HTML結(jié)構(gòu)解耦，減少修改HTML而造成的樣式無法顯示，同樣減少了因HTML修改造成的樣式重寫

解決了CSS特殊性的問題，所有的樣式都是由一個類選擇器定義。

但是這很難做到

CSS樣式全局性造成的樣式?jīng)_突問題

多人協(xié)作的命名問題

解決層疊問題，使CSS的優(yōu)先級保持相對扁平

CSS的模塊化，使CSS更具有復(fù)用的能力

SMACSS于2011年由JonathanSnook提出，當(dāng)時他在雅虎工作。

SMACSS是指CSS 的可擴(kuò)展性和模塊化架構(gòu)。我們可以將SMACSS看做是對OOCSS和BEM的一個延伸。
剛剛講過了BEM，那么我們將我們頁面的樣式都化為了組件，但是在大型網(wǎng)站開發(fā)中，這些組件依舊很龐大，那么在SMACSS中，它提出了將CSS分類這一概念。

在SMACSS中，它認(rèn)為CSS應(yīng)該根據(jù)如下五種分組類別進(jìn)行分類：

Base（基礎(chǔ)規(guī)范）：任何場合下，頁面元素的默認(rèn)外觀，這里樣式只會對標(biāo)簽元素本身做設(shè)定，不會出現(xiàn)任何class或id，但是可以有屬性選擇器或是偽類。

Layout（布局規(guī)范）：布局是一個網(wǎng)站的基本，無論是左右還是居中，甚至其他什么布局，要實現(xiàn)頁面的基本瀏覽功能，布局必不可少。使用l-/layout-為前綴。

Module（模塊規(guī)范）：基本思想與BEM類似。使用m-/module-為前綴。

State（狀態(tài)規(guī)范）：元素在特定狀態(tài)下的外觀。但是與OOCSS分離Skin的方式不同，SMACSS是抽取更高級別的樣式類，得到更強(qiáng)的復(fù)用性。使用is-/has-為前綴。

Theme（主題規(guī)范）：頁面主題外觀。使用t-/theme-為前綴

命名方式借鑒BEM命名規(guī)范

同樣提倡最小配飾深度，既盡量不使用子選擇器，保持CSS扁平化

由雅虎公司內(nèi)部提出，并應(yīng)用于雅虎官網(wǎng)。

剛剛我們講了幾種方法論，都提到了重用性，那么原子化CSS就是將重用性運用到了極端。

在2013年網(wǎng)頁設(shè)計師Brad Frost從化學(xué)中受到啟發(fā)：原子（Atoms）結(jié)合在一起，形成分子（Molecures），進(jìn)一步結(jié)合形成的生物體（Organisms）。
Brad將這個概念應(yīng)用在界面設(shè)計，我們的界面就是由一些基本的元素組成的。Josh Duck的“HTML元素周期表”（下圖）完美闡述了我們所有的網(wǎng)站、APP、企業(yè)內(nèi)部網(wǎng)、hoobadyboops等等是如何由相同的HTML元素組成的。

Atoms（原子）：為網(wǎng)頁構(gòu)成的基本元素。

Molecules（分子）：由原子構(gòu)成的簡單UI組件。

Organisms（組織）：由原子及分子組成的相對復(fù)雜的UI構(gòu)成物。

Templates（模板）：將以上元素進(jìn)行排版，顯示設(shè)計的底層內(nèi)容結(jié)構(gòu)

Pages（頁面）：將實際內(nèi)容（圖片、文章等）套件在特定模板，頁面是模板的具體實例。

理解了原子化的設(shè)計，那么為什么說原子化CSS就是將重用性進(jìn)行到了極端。
讓我們來舉個例子，GitHub上面有一款開源的ACSS工具，叫做 Atomizer
我們使用它來看一下

    
Grid
    
Inline Block
    

        
.W(1/2)
.W(1/2)
        
.W(1/3)
.W(1/3)
.W(1/3)
    

    
Flex
    

        
.W(1/2)
.W(1/2)
        
.W(1/3)
.W(1/3)
.W(1/3)
    

    
    

看到這段代碼，大家肯定會懷疑人生，這是什么鬼？
那么我們來下這段HTML生成的css代碼

.Bgc(#add8e6) {
  background-color: #add8e6;
}
.Bgc(#ccc) {
  background-color: #ccc;
}
.Bgc($primary) {
  background-color: #f3f3f3;
}
.D(f) {
  display: flex;
}
.D(ib) {
  display: inline-block;
}
.Fw(b) {
  font-weight: bold;
}
.Fz(30px) {
  font-size: 30px;
}
.W(1/2) {
  width: 50%;
}
.W(1/3) {
  width: 33.3333%;
}
.W(1/5) {
  width: 20%;
}

那么原子化的CSS到底是什么？
將CSS的代碼最小化。每一個CSS的類里面只存在一條屬性，而在使用時，用到這一條屬性時，我們只需要在HTML的class中加入對應(yīng)的CSS類就可以，最小化了CSS，但是造成了HTML的臃腫。。

我們學(xué)習(xí)了幾種CSS的方法論，社區(qū)內(nèi)還有很多種其他的方法論，如SUITCSS，ITCSS等等這里就不一一進(jìn)行討論了。

最后我們來總結(jié)下書寫CSS的方法：

CSS模塊化，使CSS與上下文無關(guān)

使用 CLASS，確保復(fù)用性

使用命名約定及前綴，提高可讀性

不嵌套 CSS，使CSS扁平化

提高CSS的可維護(hù)性及擴(kuò)展性

下一篇我將介紹現(xiàn)在比較流行的編寫CSS的方法如：

CSS預(yù)處理器

CSS后處理器

CSS in Js

CSS Module

OOCSS——概念篇
BEM的定義
為什么我們要用BEM
Atomic Design原子設(shè)計理念：構(gòu)建科學(xué)規(guī)范的設(shè)計系統(tǒng)
什么是模塊化 CSS？