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

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

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

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

　　什么是對(duì)象?

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

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

　　結(jié)構(gòu)與樣式分離：你應(yīng)該在對(duì)象中定義結(jié)構(gòu)和位置，而對(duì)于樣式特性應(yīng)該使用類名分離出來，比如說background或border。這樣一來你就不需要去覆蓋一些特征性樣式。

　　容器與內(nèi)容分離：不要在你的HTML結(jié)構(gòu)中插入樣式。換句話說，你的樣式中盡量不要使用html標(biāo)簽或者id標(biāo)識(shí)符。相反，應(yīng)該定義一些類名來定義樣式，而且選擇器的嵌套的層級(jí)應(yīng)該盡量的少。

　　我們快速做一個(gè)示例

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

　　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)。在這個(gè)例子中，border樣式在兩個(gè)類中都定義了。如果你想改變border-radius或border屬性值時(shí)，不得不在兩個(gè)地方修改。

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

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

　　/* 好的方式 */

　　.box-1 {

　　width: 200px;

　　height: 200px;

　　}

　　.box-2 {

　　width: 120px;

　　height: 120px;

　　}

　　.box-border{

　　border: 1px solid #CCC;

　　border-radius: 10px;

　　}

　　在HTML結(jié)構(gòu)中，我們可以這樣使用：

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

　　語義化和維護(hù)

　　你在意沒有語義化，而我更關(guān)心的是代碼的維護(hù)。比如說這個(gè)示例所示。

　　純CSS來定義對(duì)象就沒有語義化，但這樣就存在一些問題:

　　每次改為樣式風(fēng)格時(shí)，都需要修改HTML

　　沒有一種安全的方式來訪問DOM元素

　　對(duì)于OOCSS來說，除了維護(hù)HTML比較困難之外，其他都是很完美的。我們的CSS很容易擴(kuò)展，也非常方便用于新的內(nèi)容中。

　　因此我們寫了部分CSS代碼用于在HTML結(jié)構(gòu)中進(jìn)行擴(kuò)展。這樣的方式真的會(huì)變得更好?

　　Sass的到來

　　我可以肯定你肯定聽過Sass的@extend命令和了解他是如何工作的。因此，要非常感謝選擇器的占位符%placeholder，在Sass中可以通過@extend來擴(kuò)展，如此一來在CSS就是可以創(chuàng)建一些有語義化的類名，也解決了HTML中的存在的問題。

　　我們必須使用%placeholder來創(chuàng)建對(duì)象，通過@extend在類中調(diào)用，將其合在一起。這樣就可以自己組織代碼：

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

　　/* 不好的方式 */

　　a.twitter {

　　min-width: 100px;

　　padding: 1em;

　　border-radius: 1em;

　　background: #55acee

　　color: #fff;

　　}

　　span.facebook {

　　min-width: 100px;

　　padding: 1em;

　　border-radius: 1em;

　　background: #3b5998;

　　color: #fff;

　　}

　　所有的對(duì)象都使用@extend和基本對(duì)象混合在一起，這樣就可以得到一個(gè)干凈的CSS對(duì)象，在Sass中是十分容易的事情，我們也不必要再花時(shí)間來修改HTML。

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

　　/* 好的方式 */

　　%button {

　　min-width: 100px;

　　padding: 1em;

　　border-radius: 1em;

　　}

　　%twitter-background {

　　color: #fff;

　　background: #55acee;

　　}

　　%facebook-background {

　　color: #fff;

　　background: #3b5998;

　　}

　　.btn {

　　&--twitter {

　　@extend %button;

　　@extend %twitter-background;

　　}

　　&--facebook {

　　@extend %button;

　　@extend %facebook-background;

　　}

　　}

　　具有語義化了，完美?Sass解決了我們的總是。記住：@extend讓你的HTML保持最干凈，而且又具有語義化，這在Sass中是件十分容易的事情。

　　我喜歡把其稱為OOSass，因?yàn)樗荗OCSS和Sass的混合物。當(dāng)然，你不必使用它。如果你不在刻意在HTML中追求語義化，你仍然可以使用OOCSS。每個(gè)人都有自己的方式，那么你又是如何構(gòu)建你自己的CSS呢?請(qǐng)與我們一起分享。