好程序員web前端分享值得參考的css理論:OOCSS、SMACSS與BEM
最近在The Sass Way裏看到了Modular CSS typography一文,發現文章在開頭部分就提到了OOCSS、 SMACSS、 BEM、這3個詞。「若是還不知道這些是什麼,請先不要繼續看下去」,聯想到做者這樣友好(gāo lěng)的提醒,做爲圍觀羣衆,天然要有所迴應。因此,本文在這裏分別介紹它們。javascript
OOCSS、SMACSS及BEM都是有關css的方法論(準確地說,其中BEM應該是一個完整的前端開發理論,不只限於css),可做爲實現優秀css架構(css architecture)的指南。css
css易於理解,但應用和維護並不簡單。在各類開發情景下,css均可能成爲一個問題點。所以,咱們編寫和組織css應認真、用心。html
OOCSS前端
OOCSS (Object Oriented CSS),字面意思是面向對象的CSS,是由Nicole Sullivan提出的css理論,其主要的兩個原則是:java
Separate structure and skin(分離結構和主題) Separate container and content(分離容器和內容)程序員
用一個例子來講明。請看下面這樣的圖文排列:web
本做的主角,帝國北部地方貴族施瓦澤男爵的養子,也是托爾茲士官學校特科班「Ⅶ組」的成員。sass
.media{
1.<p><font size="3"> padding: 10px;</font></p>
2.<p><font size="3"> }</font></p>
3.<p><font size="3"> .media:after{</font></p>
4.<p><font size="3"> display: table;</font></p>
5.<p><font size="3"> clear: both;</font></p>
6.<p><font size="3"> content: " ";</font></p>
7.<p><font size="3"> }</font></p>
8.<p><font size="3"> .media-image-container{</font></p>
9.<p><font size="3"> float: left;</font></p>
10.<p><font size="3"> margin-right: 10px;</font></p>
11.<p><font size="3"> }</font></p>
12.<p><font size="3"> .media-image{</font></p>
13.<p><font size="3"> display: block;</font></p>
14.<p><font size="3"> }</font></p>
15.<p><font size="3"> .media-body{</font></p>
16.<p><font size="3"> overflow: hidden;</font></p>
17.<p><font size="3"> }</font></p>
18.<p><font size="3"> .media-shadow{</font></p>
19.<p><font size="3"> box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);</font></p>
20.<p><font size="3"> }</font></p>架構
上面這段代碼用media表示了這種圖文排列的頁面元素。若是把構成它的html、css及javascript(若是有)看作一個總體,那就至關於這是一個元件,或者說對象(object)。它能夠在站點的任何地方被重用。
這樣是如何體現OOCSS的兩個原則的呢?
Separate structure and skin
分離結構和主題是在於將一些視覺樣式效果(例如background、color)做爲單獨的「主題」來應用。在上面的例子中的陰影效果,沒有被直接寫在media的樣式規則內,而是被單獨寫在了一個名爲media-shadow的class中。所以,它成爲了可選擇、可拆分的主題。若是不須要對應主題,什麼也不要加,若是須要,加上對應的class,就是這樣的思路。
Separate container and content
分離容器和內容要求使頁面元素不依賴於其所處位置。在上面的例子中,css的選擇符都很短,無繼承選擇符(例如.header .media { }),因此,這個圖文排列的元件,能夠在任何地方使用,且會有一致的外觀。
若是須要在特定的地方讓這個元件看起來不同一些,繼續爲這個元件增長class,將「不同的部分」做爲可配置的選項。元件的外觀仍不依賴其所處位置。less
操做指南
能夠看出,OOCSS風格的css能夠描述爲兩點:
增長class 不使用繼承選擇符
OOCSS追求元件的複用,其class命名比較抽象,通常不體現具體內容。
SMACSS
SMACSS (Scalable & Modular Architecture for CSS),是由Jonathan Snook提出的css理論。其主要原則有3條:
Categorizing CSS Rules(爲css分類) Naming Rules(命名規則) Minimizing the Depth of Applicability(最小化適配深度)
這些原則分別是什麼意思呢?
Categorizing CSS Rules
這一點是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元素的容器。左右分欄、柵格系統等都屬於佈局樣式。
Module Rules, 模塊樣式。它能夠是一個產品列表,一個導航條。通常來講,Module Rules定義的元素放置於前面說的Layout Rules元素以內。模塊是獨立的,能夠在各類場合重用。
State Rules, 狀態樣式,描述的是任一元素在特定狀態下的外觀。例如,一個消息框可能有success和error兩種狀態,導航條中的任一項均可能有current狀態。
繼續OOCSS中的例子,下面新增的讓元素不顯示的is-hidden就屬於State Rules:
...
1.<p><font size="3"> 複製代碼</font></p>
2.<p><font size="3"> .is-hidden{</font></p>
3.<p><font size="3"> display: none;</font></p>
4.<p><font size="3"> }</font></p>
Theme Rules, 主題樣式,描述了頁面主題外觀,通常是指顏色、背景圖。Theme Rules能夠修改前面4個類別的樣式,且應和前面4個類別分離開來(便於切換,也就是「換膚」)。SMACSS的Theme Rules不要求使用單獨的class命名,也就是說,你能夠在Module Rules中定義.mod { }而後在Theme Rules中也用.mod { }來定義須要修改的部分。
Naming Rules
Naming Rules是說在想class等的命名時,考慮用命名體現樣式對應的類別。
按照前面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,無需命名。
命名規則不須要嚴格遵照,能夠根據實際狀況和自身喜愛作其餘的約定。記錄本身的約定(寫文檔),而後遵照,就是可行的。
Minimizing the Depth of Applicability
字面翻譯是最小化適配深度。經過一個簡單的描述來講明:
/ depth 1 /
1.<p><font size="3"> .sidebar ul h3 { }</font></p>
2.<p><font size="3"> / depth 2 /</font></p>
3.<p><font size="3"> .sub-title { }</font></p>
上下兩端css的區別在於html和css的耦合度。能夠想到,因爲上面的樣式規則使用了繼承選擇符,所以對於html的結構實際是有必定依賴的。若是把h3元素搬到另外一個位置,就有可能再也不具備這些樣式。對應的,下面的樣式規則只有一個選擇符,所以不依賴於特定html結構,只要爲元素添加class,就能夠得到對應樣式。
固然,繼承選擇符是有用的,它能夠減小因相同命名引起的樣式衝突(常發生於多人協做開發)。可是,咱們不該過分使用,在不形成樣式衝突的容許範圍以內,儘量使用短的、不限定html結構的選擇符。這就是SMACSS的最小化適配深度的意義。
看起來,這一點和OOCSS的分離容器和內容的原則很是類似。
主要目標
SMACSS着力於實現兩個主要目標:
更語義化的html和css 下降對特定html結構的依賴 BEM
BEM,即Block, Element, Modifier,是由Yandex(俄羅斯最著名的互聯網企業)的開發團隊提出的前端開發理論。BEM經過Block、Element、Modifier來描述頁面。
Block是頁面中獨立存在的區塊,能夠在不一樣場合下被重用。每一個頁面均可以看作是多個Block組成。
Element是構成Block的元素,只有在對應Block內部才具備意義,是依賴於Block的存在。
Modifier是描述Block或Element的屬性或狀態。同一Block或Element能夠有多個Modifier。
這三部分結合在一塊兒,能夠體如今class命名上,從而爲開發者提供更友好、更有意義的css組織方式。其形式是:
.block { }
1.<p><font size="3"> .block_modifier { }</font></p>
2.<p><font size="3"> .block__element { }</font></p>
3.<p><font size="3"> .block__element_modifier { }</font></p>
再回到前面OOCSS的那個圖文排列的例子,對應用BEM的寫法的話就是:
本做的主角,帝國北部地方貴族施瓦澤男爵的養子,也是托爾茲士官學校特科班「Ⅶ組」的成員。
這樣的寫法的好處是,在class命名上以約定的形式攜帶了更多有用信息。在多人合做的時候,新接手這個項目的人,也能夠很容易從class命名上分辨出來,哪些部分是Block,哪些是對應的Element,哪些是Modifier,並進一步推斷出哪部分html能夠獨立使用。
BEM是完整的前端開發理論,這裏只是提到了它採用的css的class命名規則。能夠看出,BEM的命名規則可使代碼更易於維護。
這些理論真的能夠應用嗎?
是的,並且有用。可是,請不要過於樂觀,任一種理論都只是對解決css編寫、維護問題的一種嘗試,及其經驗總結。就實際具體的項目來講,你可能仍然會遇到困惑。這些理論最重要的是提供了一種思路(即便它們也提供開發模式的代碼庫),你可能不直接應用它們,但應該經過它們認識到,在寫代碼以前,須要多一些思考。
不直接編寫css而是採用less、sass等預編譯器,也一樣須要合理的代碼編寫和組織方式,由於能夠從編譯後獲得的css來分析,因此原則是相通的。
結語 在整理寫文本以前,我只初步瞭解過OOCSS,而對另外2個尚未印象...(嗯,其實很正常) 本文的3個理論各有各的風格,沒有孰優孰劣之說,都是在編寫css時值得參考的內容。若是能夠,很是推薦本身根據這些理論背後的意圖,想一個適合本身的方法。