摘要：，字面意思是面向?qū)ο蟮模怯商岢龅睦碚?，其主要的兩個(gè)原則是分離結(jié)構(gòu)和主題分離容器和內(nèi)容用一個(gè)例子來(lái)說(shuō)明。分離容器和內(nèi)容要求使頁(yè)面元素不依賴于其所處位置。命名規(guī)則不需要嚴(yán)格遵守，可以根據(jù)實(shí)際情況和自身喜好做其他的約定。

最近在The Sass Way[]一文，發(fā)現(xiàn)文章在開(kāi)頭部分就提到了OOCSS、 SMACSS、 BEM、這3個(gè)詞?！叭绻€不知道這些是什么，請(qǐng)先不要繼續(xù)看下去”，聯(lián)想到作者這樣友好（gāo lěng）的提醒，作為圍觀群眾，自然要有所回應(yīng)。所以，本文在這里分別介紹它們。

OOCSS、SMACSS及BEM都是有關(guān)css的方法論（準(zhǔn)確地說(shuō)，其中BEM應(yīng)該是一個(gè)完整的前端開(kāi)發(fā)理論，不僅限于css），可作為實(shí)現(xiàn)優(yōu)秀css架構(gòu)（css architecture）的指南。

css易于理解，但應(yīng)用和維護(hù)并不簡(jiǎn)單。在各種開(kāi)發(fā)情景下，css都可能成為一個(gè)問(wèn)題點(diǎn)。因此，我們編寫(xiě)和組織css應(yīng)認(rèn)真、用心。

[OOCSS][] （Object Oriented CSS），字面意思是面向?qū)ο蟮腃SS，是由Nicole Sullivan提出的css理論，其主要的兩個(gè)原則是：

Separate structure and skin（分離結(jié)構(gòu)和主題）

Separate container and content（分離容器和內(nèi)容）

用一個(gè)例子來(lái)說(shuō)明。請(qǐng)看下面這樣的圖文排列：

    

        
    
    

        
本作的主角，帝國(guó)北部地方貴族施瓦澤男爵的養(yǎng)子，也是托爾茲士官學(xué)校特科班“Ⅶ組”的成員。
    

----

.media{
    padding: 10px;
}
.media:after{
    display: table;
    clear: both;
    content: " ";
}
.media-image-container{
    float: left;
    margin-right: 10px;
}
.media-image{
    display: block;
}
.media-body{
    overflow: hidden;
}
.media-shadow{
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
}

上面這段代碼用media表示了這種圖文排列的頁(yè)面元素。如果把構(gòu)成它的html、css及javascript（如果有）看做一個(gè)整體，那就相當(dāng)于這是一個(gè)元件，或者說(shuō)對(duì)象（object）。它可以在站點(diǎn)的任何地方被重用。

這樣是如何體現(xiàn)OOCSS的兩個(gè)原則的呢？

分離結(jié)構(gòu)和主題是在于將一些視覺(jué)樣式效果（例如background、color）作為多帶帶的“主題”來(lái)應(yīng)用。在上面的例子中的陰影效果，沒(méi)有被直接寫(xiě)在media的樣式規(guī)則內(nèi)，而是被多帶帶寫(xiě)在了一個(gè)名為media-shadow的class中。因此，它成為了可選擇、可拆分的主題。如果不需要對(duì)應(yīng)主題，什么也不要加，如果需要，加上對(duì)應(yīng)的class，就是這樣的思路。

分離容器和內(nèi)容要求使頁(yè)面元素不依賴于其所處位置。在上面的例子中，css的選擇符都很短，無(wú)繼承選擇符（例如.header .media { }），所以，這個(gè)圖文排列的元件，可以在任何地方使用，且會(huì)有一致的外觀。

如果需要在特定的地方讓這個(gè)元件看起來(lái)不一樣一些，繼續(xù)為這個(gè)元件增加class，將“不一樣的部分”作為可配置的選項(xiàng)。元件的外觀仍不依賴其所處位置。

可以看出，OOCSS風(fēng)格的css可以描述為兩點(diǎn)：

增加class

不使用繼承選擇符

OOCSS追求元件的復(fù)用，其class命名比較抽象，一般不體現(xiàn)具體內(nèi)容。

**SMACSS[]提出的css理論。其主要原則有3條：

Categorizing CSS Rules（為css分類(lèi)）

Naming Rules（命名規(guī)則）

Minimizing the Depth of Applicability（最小化適配深度）

這些原則分別是什么意思呢？

這一點(diǎn)是SMACSS的核心。SMACSS認(rèn)為css有5個(gè)類(lèi)別，分別是：

Base

Layout（Major Components）

Module（Minor Components）

State

Theme

Base Rules， 基礎(chǔ)樣式，描述的是任何場(chǎng)合下，頁(yè)面元素的默認(rèn)外觀。它的定義不會(huì)用到class和ID。css reset也屬于此類(lèi)。

Layout Rules， 布局樣式。它和后面的Module Rules一同，描述的是頁(yè)面中的各類(lèi)具體元素。元素是有層次級(jí)別之分的，Layout Rules屬于較高的一層，它可以作為層級(jí)較低的Module Rules元素的容器。左右分欄、柵格系統(tǒng)等都屬于布局樣式。

Module Rules， 模塊樣式。它可以是一個(gè)產(chǎn)品列表，一個(gè)導(dǎo)航條。一般來(lái)說(shuō)，Module Rules定義的元素放置于前面說(shuō)的Layout Rules元素之內(nèi)。模塊是獨(dú)立的，可以在各種場(chǎng)合重用。

State Rules， 狀態(tài)樣式，描述的是任一元素在特定狀態(tài)下的外觀。例如，一個(gè)消息框可能有success和error兩種狀態(tài)，導(dǎo)航條中的任一項(xiàng)都可能有current狀態(tài)。

繼續(xù)OOCSS中的例子，下面新增的讓元素不顯示的is-hidden就屬于State Rules：

    ...

.is-hidden{
    display: none;
}

Theme Rules， 主題樣式，描述了頁(yè)面主題外觀，一般是指顏色、背景圖。Theme Rules可以修改前面4個(gè)類(lèi)別的樣式，且應(yīng)和前面4個(gè)類(lèi)別分離開(kāi)來(lái)（便于切換，也就是“換膚”）。SMACSS的Theme Rules不要求使用多帶帶的class命名，也就是說(shuō)，你可以在Module Rules中定義.mod { }然后在Theme Rules中也用.mod { }來(lái)定義需要修改的部分。

Naming Rules是說(shuō)在想class等的命名時(shí)，考慮用命名體現(xiàn)樣式對(duì)應(yīng)的類(lèi)別。

按照前面5種的劃分，Layout Rules用l-或layout-這樣的前綴，例如：.l-header、.l-sidebar。

Module Rules用模塊本身的命名，例如圖文排列的.media、.media-image。

State Rules用is-前綴，例如：.is-active、.is-hidden。

Theme Rules如果作為多帶帶class，用theme-前綴，例如.theme-a-background、.theme-a-shadow。

Base Rules不會(huì)用到class和ID，是以標(biāo)簽選擇符為主的樣式，例如p、a，無(wú)需命名。

命名規(guī)則不需要嚴(yán)格遵守，可以根據(jù)實(shí)際情況和自身喜好做其他的約定。記錄自己的約定（寫(xiě)文檔），然后遵守，就是可行的。

字面翻譯是最小化適配深度。通過(guò)一個(gè)簡(jiǎn)單的描述來(lái)說(shuō)明：

/* depth 1 */
.sidebar ul h3 { }

/* depth 2 */
.sub-title { }

上下兩端css的區(qū)別在于html和css的耦合度?？梢韵氲剑捎谏厦娴臉邮揭?guī)則使用了繼承選擇符，因此對(duì)于html的結(jié)構(gòu)實(shí)際是有一定依賴的。如果把h3元素搬到另一個(gè)位置，就有可能不再具有這些樣式。對(duì)應(yīng)的，下面的樣式規(guī)則只有一個(gè)選擇符，因此不依賴于特定html結(jié)構(gòu)，只要為元素添加class，就可以獲得對(duì)應(yīng)樣式。

當(dāng)然，繼承選擇符是有用的，它可以減少因相同命名引發(fā)的樣式?jīng)_突（常發(fā)生于多人協(xié)作開(kāi)發(fā)）。但是，我們不應(yīng)過(guò)度使用，在不造成樣式?jīng)_突的允許范圍之內(nèi)，盡可能使用短的、不限定html結(jié)構(gòu)的選擇符。這就是SMACSS的最小化適配深度的意義。

看起來(lái)，這一點(diǎn)和OOCSS的分離容器和內(nèi)容的原則非常相似。

SMACSS著力于實(shí)現(xiàn)兩個(gè)主要目標(biāo)：

更語(yǔ)義化的html和css

降低對(duì)特定html結(jié)構(gòu)的依賴

**BEM[]（俄羅斯最著名的互聯(lián)網(wǎng)企業(yè)）的開(kāi)發(fā)團(tuán)隊(duì)提出的前端開(kāi)發(fā)理論。BEM通過(guò)Block、Element、Modifier來(lái)描述頁(yè)面。

Block是頁(yè)面中獨(dú)立存在的區(qū)塊，可以在不同場(chǎng)合下被重用。每個(gè)頁(yè)面都可以看做是多個(gè)Block組成。

Element是構(gòu)成Block的元素，只有在對(duì)應(yīng)Block內(nèi)部才具有意義，是依賴于Block的存在。

Modifier是描述Block或Element的屬性或狀態(tài)。同一Block或Element可以有多個(gè)Modifier。

這三部分結(jié)合在一起，可以體現(xiàn)在class命名上，從而為開(kāi)發(fā)者提供更友好、更有意義的css組織方式。其形式是：

.block { }
.block_modifier { }
.block__element { }
.block__element_modifier { }

再回到前面OOCSS的那個(gè)圖文排列的例子，對(duì)應(yīng)用BEM的寫(xiě)法的話就是：

    

        
    
    

        
本作的主角，帝國(guó)北部地方貴族施瓦澤男爵的養(yǎng)子，也是托爾茲士官學(xué)校特科班“Ⅶ組”的成員。
    

這樣的寫(xiě)法的好處是，在class命名上以約定的形式攜帶了更多有用信息。在多人合作的時(shí)候，新接手這個(gè)項(xiàng)目的人，也可以很容易從class命名上分辨出來(lái)，哪些部分是Block，哪些是對(duì)應(yīng)的Element，哪些是Modifier，并進(jìn)一步推斷出哪部分html可以獨(dú)立使用。

BEM是完整的前端開(kāi)發(fā)理論，這里只是提到了它采用的css的class命名規(guī)則?？梢钥闯?，BEM的命名規(guī)則可以使代碼更易于維護(hù)。

這些理論真的可以應(yīng)用嗎？

是的，而且有用。但是，請(qǐng)不要過(guò)于樂(lè)觀，任一種理論都只是對(duì)解決css編寫(xiě)、維護(hù)問(wèn)題的一種嘗試，及其經(jīng)驗(yàn)總結(jié)。就實(shí)際具體的項(xiàng)目來(lái)說(shuō)，你可能仍然會(huì)遇到困惑。這些理論最重要的是提供了一種思路（即使它們也提供開(kāi)發(fā)模式的代碼庫(kù)），你可能不直接應(yīng)用它們，但應(yīng)該通過(guò)它們認(rèn)識(shí)到，在寫(xiě)代碼之前，需要多一些思考。

不直接編寫(xiě)css而是采用less、sass等預(yù)編譯器，也同樣需要合理的代碼編寫(xiě)和組織方式，因?yàn)榭梢詮木幾g后得到的css來(lái)分析，所以原則是相通的。

在整理寫(xiě)文本之前，我只初步了解過(guò)OOCSS，而對(duì)另外2個(gè)還沒(méi)有印象...（嗯，其實(shí)很正常）

本文的3個(gè)理論各有各的風(fēng)格，沒(méi)有孰優(yōu)孰劣之說(shuō)，都是在編寫(xiě)css時(shí)值得參考的內(nèi)容。如果可以，非常推薦自己根據(jù)這些理論背后的意圖，想一個(gè)適合自己的方法。

（重新編輯自我的博客，原文地址：http://acgtofe.com/posts/2014/09/valuable-theories-of-css）