DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 淺談CSS中的OOCSS編程方式
淺談CSS中的OOCSS編程方式
編輯:CSS詳解     
這篇文章主要介紹了CSS中的OOCSS編程方式,即CSS的面向對象編程,需要的朋友可以參考下

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

CSS Code復制內容到剪貼板
  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. .product-theme-black {
  12. background: black;
  13. color: white;
  14. }
  15. .product-border {
  16. border: 1px solid #333;
  17. }

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

1. 分離容器與內容

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

CSS Code復制內容到剪貼板
  1. .container .product {
  2. ...
  3. }

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

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

CSS Code復制內容到剪貼板
  1. .column {
  2. height: auto;
  3. width: 200px;
  4. }
  5. .product {
  6. width: 180px;
  7. margin-right: 20px;
  8. margin-bottom: 10px;
  9. }

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

CSS Code復制內容到剪貼板
  1. .product {
  2. width: 180px;
  3. }
  4. .vertical-product {
  5. height: 400px;
  6. margin-right: 10px;
  7. margin-bottom: 10px;
  8. }
  9. .horizontal-product {
  10. height: auto;
  11. margin-right: 20px;
  12. margin-bottom: 10px;
  13. }

這樣便將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復制內容到剪貼板
  1. .product {
  2. width: 200px;
  3. background: #F6F2F2;
  4. border: 1px solid #C4A0A0;
  5. }

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

CSS Code復制內容到剪貼板
  1. .main-bg {
  2. background: #F6F2F2;
  3. }
  4. .main-border {
  5. border: 1px solid #C4A0A0;
  6. }

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved