css可維護方案：OOCSS VS BEM

做爲一個前端，你敢說本身懂css，敢自信的說本身精通css嗎？css編寫很簡單，可是初期的結構設計，後期的維護是一項很是消耗腦力的事情。

在這裏，拋出兩個名詞：oocss和BEM.

什麼是oocss？

還沒了解過的能夠看這篇文章 OOCSS vs. OOSCSS
相信你們都用過bootstrap，bootstrap就是典型的面向對象css，即oocss.

面向對象的CSS是一種容易重用的一種CSS規則，這裏關鍵的一點就是如何在頁面中識別，建立和模塊化可重用的對象，並在頁面中任何須要的地方重用，並擴展其附加功能。因此個人理解是，oocss是一種可重用，樣式分離，耦合度低的css.

缺點：

1. OOCSS適合真正的大型網站開發，由於大型網站用到的可重用性組件特別的多，若是運用在小型項目中可能見不到什麼成效。因此用不用OOCSS應該根據你的項目來決定。
2. 若是沒用巧妙的使用，建立組件可能對於你來講是一堆沒用的東西，成爲一爛攤子，給你的維護帶來意想不到的杯具，說不定仍是個維護的噩夢。
3. 最好給每個組件備寫一份說明文檔，有助於調用與維護
4. 建立了數千行CSS，但有可能這些CSS永遠不會被使用。好比Twitter Bootstrap
5. 樣式(CSS)和結構(HTML)藕合太緊

優勢：

1. 強調重用，減小CSS代碼
2. 選擇器簡潔
3. 可擴展類
4. 強調風格與內容分離
5. 強調內容與容器分離
6. 具備清潔的HTML標記，有語義的類名，邏輯性強的層次關係
7. 語義標記，有助於SEO
8. 可擴展的標記和CSS樣式，有更多的組件能夠放到庫中，而不影響其餘的組件

舉個例子

//css寫法
.title-1{
    border-bottom:1px solid #ccc;
    font-size:16px;
    font-weight:bold;
    color:#333;
}

//OOCSS寫法
.bb-c{
    border-bottom:1px solid #ccc;
}   
.f16{
    font-size:16px;
}
.bold{
    font-weight:bold;
}
.c333{
    color:#333;
}

//html
<div class="f16 bold c333 bb-c">標題</div>複製代碼

然而，你會以爲這給html添加了太多的負擔，因此我更推薦使用oosass。

oosass是可伸縮，面向對象的CSS，其實它就是OOCSS的一個變異體，進化體。

oosass的特色：

1. 沒有CSS，只有Sass
2. 經過%placholder來聲明視覺對象
3. 能夠經過mixin建立可重複的CSS
4. 語義化的類名在DOM中聲明，而視覺化類名在Sass中聲明，不然不可能使用CSS構建UI結構和框架
5. 經過Sass來擴展類，而不是經過DOM來擴展類

舉個例子，上述代碼能夠變爲：

%bb-c{
    border-bottom:1px solid #ccc;
}   
%f16{
    font-size:16px;
}
%bold{
    font-weight:bold;
}
%c333{
    color:#333;
}
%c999{
    color:#999;
}
.title-1{
    @extend %bb-c;
    @extend %f16;
    @extend %bold;
    @extend %c333;
}

//假設有類title-2
.title-2{
    @extend %f16;
    @extend %c999;
}複製代碼

則生成的代碼爲：

.title-10 {
  border-bottom: 1px solid #ccc; 
}

.title-10, 
.title-20 {
  font-size: 16px; 
}

.title-10 {
  font-weight: bold; 
}

.title-10 {
  color: #333; 
}

.title-20 {
  color: #999;
}複製代碼

值得注意的是，在動手寫oosass以前，必定要動腦好好想一想怎麼構建本身的原子類庫，由於只要你的原子類足夠好，你後面的組件和頁面只須要extend原子類，代碼基本不會有增長。原子庫的構建思路以下：

/**
 * 原子類 - 文本控制
 */

%tl {
    text-align: left;
}

%tr {
    text-align: right;
}

%tc {
    text-align: center;
}

/**
 * 原子類 - 字體大小控制
 */
%f12 {
    font-size: 12px;
}

%f14 {
    font-size: 14px;
}

%f16 {
    font-size: 16px;
}

%f18 {
    font-size: 18px;
}

/**
 * 原子類 - 定位
 */

%fl {
    float: left;
}

%fr {
    float: right;
}

%pr {
    position: relative;
}
%pa {
    position: absolute;
}複製代碼

固然，若是你須要用到覆蓋的時候，就沒法@extend了，由於原子類在最上層，優先級不夠。

什麼是BEM？

BEM表明塊（Block），元素（Element），修飾符（Modifier）。

Block 是頁面中獨立存在的區塊，能夠在不一樣場合下被重用。每一個頁面均可以看作是多個Block組成。

Element 是構成Block的元素，只有在對應Block內部才具備意義，是依賴於Block的存在。

Modifier 是描述Block或Element的屬性或狀態。同一Block或Element能夠有多個Modifier。

不少人對BEM的第一印象是：又長又醜，一點都不漂亮！

運用BEM思想的框架，網站：

餓了麼的框架elementUI就是BEM的一種，你也能夠研究網站company.yandex.ru/

若是你沒接觸過BEM，能夠查看文章：BEM的定義

他的命名規範

下劃線和橫線

component-name 
component-name--modifier-name 
component-name__sub-object 
component-name__sub-object--modifier-nam複製代碼

駝峯

org-ComponentName 
org-ComponentName--modifiername 
org-ComponentName-subObject 
org-ComponentName-subObject--modifiername複製代碼

由於時常存在塊嵌套另外一個塊的問題，可使用前綴來區分

p-頁面（Page） （應用於body元素的類）,對可維護性不是那麼重要的靜態頁面十分有用 —應該避免嵌套使用 (例: p-Homepage);
l-佈局（Layout）, 好比列（columning），包裹（wrappers） 和容器（containers）等等(例: l-Masthead, l-Footer);
c-組件（components ）(例: c-Dropdown, c-Button…);
u-公共類（Utility classes） — 不會發生改變, 在代碼的任何地方都不能重載。(例: u-textCenter, u-clearfix…);
js-JavaScript鉤子：永遠不該該出如今CSS中。
g-JavaScript鉤子：全局js類，永遠不該該出如今CSS中複製代碼

解決嵌套的思路能夠參考文章：關於BEM中常見的十個問題以及如何避免

最佳實踐：

<div class="c-card">
    <div class="c-card__header"> <h2 class="c-card__title">Title text here</h3> </div> 
    <div class="c-card__body">
        <p>I would like to buy:</p> <!-- Much nicer - a layout module --> 
        <ul class="l-list"> <li class="l-list__item"> <!-- A reusable nested component --> <div class="c-checkbox"> <input id="option_1" type="checkbox" name="checkbox" class="c-checkbox__input"> <label for="option_1" class="c-checkbox__label">Apples</label> </div> </li> <li class="l-list__item"> <div class="c-checkbox"> <input id="option_2" type="checkbox" name="checkbox" class="c-checkbox__input"> <label for="option_2" class="c-checkbox__label">Pears</label> </div> </li> </ul> <!-- .l-list --> </div> <!-- .c-card__body --> </div> <!-- .c-card -->複製代碼

優勢

1. 解決了命名空間的問題
2. 多人協做時，只要有文檔清楚標註規則，後來人能夠很輕易的讀懂，接手
3. 更易於維護

缺點

1. 容易寫的又長又醜
2. 代碼量比較多，沒這麼簡潔
3. 須要完善的說明文檔和規則

個人理解

我的以爲，若是從組件來講，使用BEM很不錯，定製化樣式就用oosass，二者結合使用，純屬我的觀點，歡迎提出你的意見及實踐。畢竟我只是紙上談兵。

參考文檔

www.w3cplus.com/preprocesso…
www.w3cplus.com/css/oocss-c…
segmentfault.com/a/119000000…
www.w3cplus.com/css/fifty-s…