淺談CSS代碼管理OOCSS、SMACSS、BEMCSS三種設計模式

面向對象的OOCSS，是由Nicole Sullivan提出的css理論，雖然說是理論，實則更像一種程序員約定的規範。

是一種把面向對象方法學應用到 CSS 代碼組織和管理中的實踐。面向對象方法學中的不少理念，如模塊化、單一功能原則（Single responsibility principle）和關注點分離（Separation of concerns）等，對於須要組織和管理大量 CSS 代碼的應用也是適用的。OOCSS 提出了 CSS 對象的概念，用來表示重複出現的可視化模式。這些模式能夠被抽象成獨立的 HTML、CSS 和 JavaScript 代碼片斷，並在整個項目中共享。
有兩個重要的原則：
    第一個原則是把結構和外觀分開。重複出現的可視化模式應該只關注外觀，而與 DOM 結構無關。這樣能夠提升 CSS 對象的可複用性。
    第二個原則是把容器和內容分開。這就要求在 CSS 樣式中不該該出現與 DOM 樹中的位置相關的規則。CSS 樣式應該只關注內容，而不是 DOM 元素及其層次關係。
<div class="demo-list">
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</div>
對a修改樣式可能用.demo-list ul li a選擇，效率比較低，另外一方面一旦在後期過程當中對列表html進行重構，css也須要重構，耦合性變得很強，維護困難。
OOCSS推薦的寫法是在a標籤加上demo-a樣式，能夠經過.demo-list .demo-a的方式來控制解耦。
提取公共樣式不少框架都是這種模式，Bootstrap按鈕.btn-info、.btn-warning等。

 

SMACSS經過一個靈活的思惟過程來檢查你的設計過程和方式是否符合你的架構，更像一種規範~
Scalable and Modular Architecture for CSS
    1爲css分類
    2命名規範
    3最小化適配深度

1爲css分類
爲css分類這一點是SMACSS的核心。SMACSS認爲css有5個類別，分別是： 
1 Base 
2 Layout 
3 Module 
4 State 
5 Theme or Skin
SMACSS還約定了一個前綴l-/layout-來標識佈局的class
.layout-header {}
.layout-container {}
.layout-sidebar {}
.layout-content {}
.layout-footer {}
SMACSS中的模塊具備本身的一個命名，隸屬於模塊下的類皆以該模塊爲前綴
.todolist{}
.todolist-title{}
.todolist-image{}
.todolist-article{}
SMACSS狀態規範,這個應該不少前端開發者都很好理解，描述的是任一元素在特定狀態下的外觀。
is-hidden
主題規範,描述了頁面主題外觀，通常是指顏色、背景圖。Theme Rules能夠修改前面4個類別的樣式，且應和前面4個類別分離開來（便於切換，也就是「換膚」）。SMACSS的Theme Rules不要求使用單獨的class命名，也就是說，你能夠在Module Rules中定義.header{ }而後在Theme Rules中也用.header { }來定義須要修改的部分(後加載覆蓋前加載樣式內容)

2命名規範
按照前面5種的劃分:
Base Rules(Pass)
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。

3最小適配深度
/* depth 1 */ .sidebar ul h3 { }
/* depth 2 */ .sub-title { }
兩段css的區別在於html和css的耦合度(這一點上和OOCSS的分離容器和內容的原則不謀而合)。能夠想到，因爲上面的樣式規則使用了繼承選擇符，所以對於html的結構實際是有必定依賴的。若是html發生重構，就有可能再也不具備這些樣式。對應的，下面的樣式規則只有一個選擇符，所以不依賴於特定html結構，只要爲元素添加class，就能夠得到對應樣式。
固然，繼承選擇符是有用的，它能夠減小因相同命名引起的樣式衝突（常發生於多人協做開發）。可是，咱們不該過分使用，在不形成樣式衝突的容許範圍以內，儘量使用短的、不限定html結構的選擇符。這就是SMACSS的最小化適配深度的意義。

 

BEM，即Block，Element，Modifier，是由Yandex（俄羅斯最著名的互聯網企業）的開發團隊提出的前端開發理論。BEM經過Block、Element、Modifier來描述頁面(關鍵就是爲了解決多人協做的命名問題)。
Block是頁面中獨立存在的區塊，能夠在不一樣場合下被重用。每一個頁面均可以看作是多個Block組成。
Modifier是描述Block或Element的屬性或狀態。同一Block或Element能夠有多個Modifier。
寫法：block__element--modifier   模塊名__元素名--修飾器名
在用 jQuery 能夠經常看到這樣的寫法：$(‘.nav–main a’)，一旦css發生重構，javascript代碼也將變得難以維護，分不清那些代碼是否會受到影響。
因此用 HTML 的屬性去選取 DOM 節點會更好，若是非要用 CSS 的 class 那也能夠多寫一個 js- 的 prefix，以表示這個節點有被 Javascript 使用，例如：
<li><a class='nav__a js-nav-a nav__a--on'></a></li>
<li><a class='nav__a js-nav-a'></a></li>
<li><a class='nav__a js-nav-a'></a></li>

 

三種設計模式都有共同的特色，那即是讓html與css更好的解耦，抽取樣式中可複用的部分，使你的html代碼更具語義。瞭解這些設計模式無疑會使你的css代碼更具模塊化，多人協做的時候也能有效避免那些命名問題帶來的困擾又或者說提供一些解決的思路。最重要是提取精華，靈活應用，更加的規範規模化，在達到提升效率的同時兼顧性能。