自從2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以來。它就成為一個領(lǐng)先的模塊系統(tǒng)，用來組織你的CSS代碼方式之一。

OOCSS不同于其他組織CSS代碼方法，比如SMACSS或者BEM。通過將CSS代碼和結(jié)構(gòu)分離讓你的模塊可重用。事實上，我也通常將SMACSS與OOCSS混為一談。

OOCSS、SMACC和BEM在CSS中是很有內(nèi)涵的東東，早就在W3cplus站點(diǎn)上有相關(guān)內(nèi)容科普過?？梢哉f理解了這些內(nèi)容將能更好的幫助您組織、管理您的CSS代碼或者說CSS模塊。

今天，我要和大家一起探討的是OOCSS的一些基本原則。主要跟大家一起探討的是如何將Sass和OOCSS更好結(jié)合在一起的一些建議。
什么是對象？

    在視覺是這是一個重復(fù)的模塊，可以將HTML、CSS和JavaSctrip獨(dú)立抽取出來，成為一個獨(dú)立的片段——Nicole Sullivan

將一個CSS對象抽取出來要考慮的第一件事情就是怎么將樣式與結(jié)構(gòu)分離出來，組織代碼的最佳方式是什么？OOCSS的創(chuàng)始人Nicole Sllivan提了兩個主要原則：

    結(jié)構(gòu)與樣式分離：你應(yīng)該在對象中定義結(jié)構(gòu)和位置，而對于樣式特性應(yīng)該使用類名分離出來，比如說background或border。這樣一來你就不需要去覆蓋一些特征性樣式。
    容器與內(nèi)容分離：不要在你的HTML結(jié)構(gòu)中插入樣式。換句話說，你的樣式中盡量不要使用html標(biāo)簽或者id標(biāo)識符。相反，應(yīng)該定義一些類名來定義樣式，而且選擇器的嵌套的層級應(yīng)該盡量的少。

我們快速做一個示例

運(yùn)用這些原則可能比較困難（理解理論的東西總是蛋疼的）。讓我們來看一個簡單的實例，看看是如何組織這樣的代碼:

CSS Code復(fù)制內(nèi)容到剪貼板

/* 不好的方式 */  
.box-1 {   
  border: 1px solid #ccc;   
  width: 200px;   
  height: 200px;   
  border-radius: 10px;   
}   
.box-2 {   
  border: 1px solid #ccc;   
  width: 120px;   
  height: 120px  
  border-radius: 10px;   
}  

你不難發(fā)現(xiàn)，有一些重復(fù)的樣式出現(xiàn)。在這個例子中，border樣式在兩個類中都定義了。如果你想改變border-radius或border屬性值時，不得不在兩個地方修改。

為了解決這個問題，把這個樣式放在另一個新增加的類名中：

CSS Code復(fù)制內(nèi)容到剪貼板

/* 好的方式 */  
.box-1 {   
  width: 200px;   
  height: 200px;   
}   
.box-2 {