CSS中的OOCSS編程方式是怎樣的

CSS中的OOCSS編程方式是怎樣的，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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

CSS 

1. .product {   

2.     display: block;   

3.     overflow: hidden;   

4.     float: left;   

5.     width: 200px;   

6.     height: auto;   

7. }   

8. .product-head{...}   

9. .product-body{...}   

10. .product-foot{...}   

11.   

12. .product-theme-black {   

13.     background: black;   

14.     color: white;   

15. }   

16.   

17. .product-border {   

18.     border: 1px solid #333;   

19. }  

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

1. 分離容器與內容

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

CSS 

1. .container .product {   

2.     ...   

3. }  

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

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

CSS 

1. .column {   

2.     height: auto;   

3.     width: 200px;   

4. }   

5.   

6. .product {   

7.     width: 180px;   

8.     margin-right: 20px;   

9.     margin-bottom: 10px;   

10. }  

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

CSS 

1. .product {   

2.     width: 180px;   

3. }   

4.   

5. .vertical-product {   

6.     height: 400px;   

7.     margin-right: 10px;   

8.     margin-bottom: 10px;   

9. }   

10.   

11. .horizontal-product {   

12.     height: auto;   

13.     margin-right: 20px;   

14.     margin-bottom: 10px;   

15. }     

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

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

2. 分離皮膚與結構

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

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

CSS 

1. .product {   

2.     width: 200px;   

3.     background: #F6F2F2;   

4.     border: 1px solid #C4A0A0;   

5. }  

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

CSS 

1. .main-bg {   

2.     background: #F6F2F2;   

3. }   

4.   

5. .main-border {   

6.     border: 1px solid #C4A0A0;   

7. }  

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

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

關于CSS中的OOCSS編程方式是怎樣的問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。