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

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

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

css易于理解，但應用和維護并不簡單。在各種開發(fā)情景下，css都可能成為一個問題點。因此，我們編寫和組織css應認真、用心。

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

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

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

用一個例子來說明。請看下面這樣的圖文排列：

    

        
    
    

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

----

.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表示了這種圖文排列的頁面元素。如果把構(gòu)成它的html、css及javascript（如果有）看做一個整體，那就相當于這是一個元件，或者說對象（object）。它可以在站點的任何地方被重用。

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

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

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

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

可以看出，OOCSS風格的css可以描述為兩點：

增加class

不使用繼承選擇符

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

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

Categorizing CSS Rules（為css分類）

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

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

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

這一點是SMACSS的核心。SMACSS認為css有5個類別，分別是：

Base

Layout（Major Components）

Module（Minor Components）

State

Theme

Base Rules， 基礎樣式，描述的是任何場合下，頁面元素的默認外觀。它的定義不會用到class和ID。css reset也屬于此類。

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

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

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

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

    ...

.is-hidden{
    display: none;
}

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

Naming Rules是說在想class等的命名時，考慮用命名體現(xiàn)樣式對應的類別。

按照前面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不會用到class和ID，是以標簽選擇符為主的樣式，例如p、a，無需命名。

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

字面翻譯是最小化適配深度。通過一個簡單的描述來說明：

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

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

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

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

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

SMACSS著力于實現(xiàn)兩個主要目標：

更語義化的html和css

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

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

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

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

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

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

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

再回到前面OOCSS的那個圖文排列的例子，對應用BEM的寫法的話就是：

    

        
    
    

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

這樣的寫法的好處是，在class命名上以約定的形式攜帶了更多有用信息。在多人合作的時候，新接手這個項目的人，也可以很容易從class命名上分辨出來，哪些部分是Block，哪些是對應的Element，哪些是Modifier，并進一步推斷出哪部分html可以獨立使用。

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

這些理論真的可以應用嗎？

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

不直接編寫css而是采用less、sass等預編譯器，也同樣需要合理的代碼編寫和組織方式，因為可以從編譯后得到的css來分析，所以原則是相通的。

在整理寫文本之前，我只初步了解過OOCSS，而對另外2個還沒有印象...（嗯，其實很正常）

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

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