如何去組織你的CSS代碼

一、Object Oriented CSS (OOCSS)

面向對象的 CSS。OOCSS 的想法首先要明白 CSS 的 「Object」 是個毛線玩意。

CSS的樣式是須要應用到頁面的結構上的。通俗的講就是須要應用到HTML標籤上。好比一個頁面上的一個區域、控件、標籤等，就是一個 Object ，大部分狀況下，這種 Object 確定是能夠複用的。

常見的好比 Button按鈕。視覺上就多是一個圖形按鈕，而後咱們能夠在其上面添加各類樣式，以得到咱們想要的效果。

Tag : button
calss: btn

OOCSS 有個特色就是結構和樣式是分開的，好比說一個漸變按鈕，那麼 .btn 的 class 是不會包含漸變相關的屬性的，而是須要單獨抽取出一個漸變的 class，而後讓 .btn 去擴展從而獲得一個漸變的按鈕。

.btn {//結構
    ...
}
.btn.btn-info {//樣式
    backgrond: green;
}
//這彷佛有點像Bootstrap的味道

就像官方說的那樣，一個 Object 包含了四個部分：

1. HTML ，會有一個到多個的 DOM 節點
2. CSS , 用來表示上述節點的樣式， 這些樣式都會以最外面的包裹層 Node 的 class Name 開始
3. 背景圖片、或者其餘的一些用來展現的資源組成的組件
4. Javascript 的事件，行爲等。

另外一個特色在於，OOCSS 認爲 container 和 content 是須要隔離開的（這裏的container只是將一塊區域包裹起來，並不具備任何特殊的意義）。也就是說，儘可能不要去使用依賴於節點結構位置的樣式定義。好比這樣的就是不容許的：

.video-container .title{
  ...
}

OOCSS 中會建議你直接這樣去寫：也就是直接去寫這個元素。

.title{
  ...
}

二、Block,Element,Modifier(BEM)

BEM是一套嚴格但合理的命名規範使得你的 class 保持一個較好的可讀性和維護性。方便合做開發，別人容易讀得懂你的代碼，你也容易維護好你的樣式。

格式爲：

.block{}

.block__element{}

.block--modifier{}

格式大約就是如上所屬那樣，固然，有一點須要注意，多層 DOM 節點的狀況下正確的寫法應該是這樣的：

<div class="block">
    <div class="block__e1">
       <button class="block__e2"></button>
    </div>
</div>

Stackoverflow 上有個特別好的解釋對於 BEM 的說法點這裏查看

簡單說，就是 html 是一個 DOM樹，那麼你在寫樣式的的時候就寫成一個 BEM樹一一對應就能夠了。看例子：

html：

<ul>
  <li>
     <a>
       <span></span>
     </a>
  </li>
</ul>

DOM樹中有以下四個節點：

ul
ul>li
ul>li>a
ul>li>a>span

那麼對應的咱們就能夠設計出以下的 BEM class：

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link">
      <span class="menu__text"></span>
    </a>
  </li>
</ul>

三、參考文章

瞎扯扯OOCSS,ACSS,BEM,SMACSS