萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS中的OOCSS編程方式是什麼呢

CSS中的OOCSS編程方式是什麼呢

歡迎大家在這裡學習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混亂。

好了CSS中的OOCSS編程方式是什麼內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦:

CSS編寫規范介紹 

copyright © 萬盛學電腦網 all rights reserved