淺談CSS中的OOCSS編程方式

 　　OOCSS即面向對象的CSS，這裡對象指的是頁面中的元素對象，與傳統編程中的面向對象不太相同，比如不存在方法這種東西，硬要說的話，附加的一些class可以看作是繼承或者接口之類的東西來實現對象的差異化。比如電商網站中的商品就是一個典型的對象，它們既有許多相同的部分，又有許多差異，寬高、按鈕、圖片、標題等基本布局都是相同的，而邊距、線框、背景顏色、字號等都是差異化的。由此按照OOCSS的指導原則，我們應該寫一個product class，然後為其添加一些border、theme之類的class來差異化它：

　　CSS Code復制內容到剪貼板

　　.product {

　　display: block;

　　overflow: hidden;

　　float: left;

　　width: 200px;

　　height: auto;

　　}

　　.product-head{...}

　　.product-body{...}

　　.product-foot{...}

　　.product-theme-black {

　　background: black;

　　color: white;

　　}

　　.product-border {

　　border: 1px solid #333;

　　}

　　這樣在以上兩種附加class的作用下，我們在html中就可以獲得4種不同的product樣式，隨著附加class增加，product的樣式也會呈指數增加，千變萬化。這僅僅是一個簡單的例子，意在點出OOCSS的理念，但並沒有突出它的意義所在。別著急，先來看看OOCSS的兩大原則。

　　1. 分離容器與內容

　　所謂的容器即包裹對象的元素，比如一個div，我們經常會命名為wrap、container、body等。那麼如何才算是分離容器與內容呢?很簡單，一句話，內容在哪都可用。也就是說不應該出現這樣的情況：

　　CSS Code復制內容到剪貼板

　　.container .product {

　　...

　　}

　　這樣干的結果就是復用性大大降低，因為只能在這個容器內使用它了。但這並不代表我們應該將所需的樣式全部一股腦的扔進單獨的class中，對於差異化應該單獨放在一個class中，這才是OOCSS的精髓。

　　舉個例子，當我們既不想犧牲太多性能，又想來個瀑布流顯擺顯擺的時候，大部分前端都會使用column，類似泳道的設計。你想說哦不，這是偽pinterest，但是誰在乎呢，用戶是不會有閒工夫拖拽浏覽器的寬度來鑒別它的，在IE下商品多的時候至少不會太卡。哈，別較真，首先分為幾個column，然後按照高度往裡填放商品，先來看看下面的代碼吧，我有省略一些樣式避免誤導：

　　CSS Code復制內容到剪貼板

　　.column {

　　height: auto;

　　width: 200px;

　　}

　　.product {

　　width: 180px;

　　margin-right: 20px;

　　margin-bottom: 10px;

　　}

　　看起來不錯，每列200px寬，商品放入其中，水平間距要大，垂直間距要小些才像column。但是等等，我們總還是需要整齊擺放的商品列表的對不對。也許margin並不是product的必要屬性，至少它應該是可變的。我們抽出它來：

　　CSS Code復制內容到剪貼板

　　.product {

　　width: 180px;

　　}

　　.vertical-product {

　　height: 400px;

　　margin-right: 10px;

　　margin-bottom: 10px;

　　}

　　.horizontal-product {

　　height: auto;

　　margin-right: 20px;

　　margin-bottom: 10px;

　　}

　　這樣便將column或list之類的容器與product分開來毫無關系了，即使以後出現了其他組織形式，只要product的基本結構沒有變都可以直接復用，無非是添加一些附屬樣式到新的xxx-product的class中。另外這樣做還有一個好處，設計邏輯放在了HTML中，CSS更加強大。

　　什麼是樣式邏輯?商品在瀑布流中不定高，在列表中定高，這就是一種樣式的邏輯，如果用父子選擇器的形式寫在CSS中，那它就失去了自由。而放在HTML通過選擇添加何種附屬class來展現不同形式的product，則非常的自由與靈活。另外值得一說的是，margin-bottom是一樣的，但我們應該各自放在各自的class裡面，原因很簡單，它們僅僅是一不小心恰好一樣，在設計邏輯中它們並不是一樣的bottom，這裡並不是重復，而是看起來一樣。如果以後需要改變其中的一個bottom，共用則顯得非常別扭。

　　2. 分離皮膚與結構

　　第二點很容易理解，皮膚(theme)就是視覺效果，即使被剔除網頁也沒有什麼影響的就是皮膚;而結構指地並不是像HTML這樣抽象的結構，因為CSS畢竟還是樣式，所以結構只是相對的頁面結構。

　　先來看看我們的product吧，添加一些背景色和邊框：

　　CSS Code復制內容到剪貼板

　　.product {

　　width: 200px;

　　background: #F6F2F2;

　　border: 1px solid #C4A0A0;

　　}

　　看起來還不錯，不過設計師都是自大狂，精心的調色，完美的搭配，絕對不會讓你僅僅使用這麼一次的，頁面的其他模塊、sidebar甚至是header都可能采用相同的背景顏色與邊框，它們甚至可能互相嵌套。好吧，這其實在設計上是為了視覺統一，畢竟沒有幾個設計大師能hold住3，4種以上的顏色。所以我們能做的並不是在每個class中添加這樣的樣式，而是把它提出來成為獨立的class，原因就像我開篇說的那樣，顏色為混沌之源。

　　CSS Code復制內容到剪貼板

　　.main-bg {

　　background: #F6F2F2;

　　}

　　.main-border {

　　border: 1px solid #C4A0A0;

　　}

　　這樣就可以在頁面中隨時使用主要的設計元素了，而且需要修改時也非常的簡單，不用擔心有什麼地方漏掉。另外我將背景與邊框分為了兩個class，原因還是設計邏輯應該放在HTML，背景與邊框並不是一定同時出現的，兩者的關系應該由HTML決定，即使設計上邏輯決定了兩者的綁定，在實現時也有可能因為HTML結構而放在兩個不同的元素上。

　　OOCSS強調class，將每組樣式寫成一個class方便HTML中使用，眾多class組合起來能千變萬化組成一個對象。所以如果是想一勞永逸的寫一套UI作為開發時使用的樣式，我建議使用OOCSS來進行開發。但它也有缺點，過多的將設計邏輯放在HTML中，極大的自由化了頁面開發時的選擇，如果寫HTML的開發者不能很好的理解整套CSS的結構，較易在HTML中造成class混亂。