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

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

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

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

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

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

能不能提升幸福感

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

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

OOCSS
BEM
SMACSS
Atomic?CSS

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

面向?qū)ο髮?duì)于后端開發(fā)人員可能較為熟悉，那么在CSS中的面向?qū)ο笫鞘裁矗?/p>

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

CSS中的對(duì)象是一個(gè)可復(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

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

按鈕

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

接下來(lái)我們來(lái)了解下，OOCSS包含了兩個(gè)原則：

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

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

以及OOCSS的其他特點(diǎn)：

使用類名來(lái)擴(kuò)展基礎(chǔ)對(duì)象

堅(jiān)持語(yǔ)義化的命名方式

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

    

        
列表1
        
列表2
        
列表3
    

.nav ul li {...}

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

    

        
列表1
        
列表2
        
列表3
    

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

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

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

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

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

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

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

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

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

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

.red{
   background-color: red;
}

按鈕

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

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

label按鈕
我是紅色的label

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

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

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

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

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

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

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

BEM是一個(gè)嚴(yán)格約定的命名規(guī)范，通過(guò)這種規(guī)范，來(lái)解決我們?cè)诰帉慍SS是所遇到的問題。

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

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

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

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

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

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

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

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

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

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

    

        
列表1 ?
        
列表2 
        
列表3 
    

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

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

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

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

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

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

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

盡量避免子代選擇器

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

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

但是這很難做到

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
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)
    

    
    

看到這段代碼，大家肯定會(huì)懷疑人生，這是什么鬼？
那么我們來(lái)下這段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的代碼最小化。每一個(gè)CSS的類里面只存在一條屬性，而在使用時(shí)，用到這一條屬性時(shí)，我們只需要在HTML的class中加入對(duì)應(yīng)的CSS類就可以，最小化了CSS，但是造成了HTML的臃腫。。

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

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

CSS模塊化，使CSS與上下文無(wú)關(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è)計(jì)理念：構(gòu)建科學(xué)規(guī)范的設(shè)計(jì)系統(tǒng)
什么是模塊化 CSS？