更新時(shí)間:2017-04-14 來源:黑馬程序員Web前端培訓(xùn)學(xué)院 瀏覽量:
前言
隨著Web技術(shù)的發(fā)展,每一個(gè)網(wǎng)站都離不開CSS(層疊樣式表),它的出現(xiàn)將Web內(nèi)容與表現(xiàn)(也可以稱作結(jié)構(gòu)與樣式)做到了真正的分離,因此CSS已經(jīng)成為前端開發(fā)人員的基礎(chǔ)必備技能。
會用CSS的人都有這樣一種感覺:它實(shí)在太簡單了!沒錯(cuò),CSS的語法是最常見的鍵值形式(屬性名:屬性值),常用的樣式屬性也就那么幾十種。在掌握了選擇器、布局定位、盒模型以及常用的樣式之后,編寫一個(gè)漂亮的網(wǎng)站完全沒有問題。當(dāng)我們從新手變成老手做過無數(shù)漂亮網(wǎng)頁之后,你是否有過這樣的疑惑:那些常用的樣式屬性,我每天都要敲上幾十遍甚至上百遍,它們難道就不能精簡一下,解放雙手給我騰出一杯coffee的時(shí)間嗎?
答案是肯定的!學(xué)過后臺開發(fā)語言的人應(yīng)該知道:思想是靈魂,凌駕于代碼之上;下面我們通過“流行的CSS思想”系列文章來了解一些當(dāng)下正在流行的CSS思想。
OOCSS
定義:OOCSS(Object Oriented CSS)顧名思義,就是面向?qū)ο蟮腃SS,讓我們以面向?qū)ο蟮乃枷霝橹笇?dǎo),編寫出可重用,可擴(kuò)展,易維護(hù)的CSS樣式,因此它不是一門新的編程語言或者技術(shù),也不是新的語法,它只不過是一種書寫CSS的方法和規(guī)范。
OOCSS的核心就是用最簡單的方式編寫最整潔,最干凈的CSS代碼,避免出現(xiàn)一鍋粥式的雜亂無章(編寫時(shí)麻煩,修改時(shí)頭疼,改版維護(hù)時(shí)難于上青天)。
OOCSS最重要的是從項(xiàng)目的頁面中分析抽象出“對象”組件,并給這些對象創(chuàng)建CSS規(guī)則,最后完善出一套基礎(chǔ)組件庫,then,我們新建頁面時(shí)為元素應(yīng)用已有的樣式規(guī)則,只須重寫少量的甚至不寫任何樣式,就能創(chuàng)建一個(gè)漂亮的頁面,解放雙手指日可待。
引用OOCSS之父Nicole Sullivan的話來說, 面向?qū)ο蟮腃SS有兩個(gè)原則:
·獨(dú)立的結(jié)構(gòu)和樣式(Separation Of Structure From Skin)
·獨(dú)立的容器和內(nèi)容(Separation Of Containers And Content)
·獨(dú)立的結(jié)構(gòu)和樣式(皮膚): 幾乎每個(gè)元素在同一頁面上具有不同的視覺表現(xiàn)形式(即皮膚,例如:登錄按鈕的皮膚和退出按鈕的皮膚),并在不同的頁面上重復(fù)應(yīng)用此皮膚樣式。
把元素的結(jié)構(gòu)樣式和皮膚樣式獨(dú)立出來作為基礎(chǔ)模塊樣式,這些模塊樣式可重用到任何其它元素并得到一致的顯示結(jié)果。
在將結(jié)構(gòu)和皮膚的樣式分離之前,我們的CSS樣式很可能會這樣定義:
#button { width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #box { width: 400px; overflow: hidden; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #widget { width: 500px; min-height: 200px; overflow: auto; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; }
上面三個(gè)元素的樣式是唯一的,并且它們用不可重用的ID選擇器來定義各自的樣式。但他們也有一些共同的樣式屬性,比如灰色的邊框、陰影樣式,隨著一點(diǎn)點(diǎn)地分析與合并,我們最終會抽象出共同的皮膚樣式:
.button { width: 200px; height: 50px; } .box { width: 400px; overflow: hidden; } .widget { width: 500px; min-height: 200px; overflow: auto; } .skin { border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; }
現(xiàn)在,所有的樣式都使用類來定義。同時(shí),我們將共同的樣式提煉為一個(gè)可重用的“皮膚”,避免了那些不必要的自我重復(fù)。將“皮膚”樣式應(yīng)用于任何元素都可得到相同的視覺效果,這就是OOCSS所倡導(dǎo)的“通過盡量少的樣式來編寫高復(fù)用的CSS”。
獨(dú)立的容器和內(nèi)容:把內(nèi)容從容器中分離出來,使內(nèi)容不再局限于特定的容器,換句話說也就是使任何容器接受任何形式的內(nèi)容。此原則關(guān)注的是對象的重用性(將模塊的內(nèi)容和容器解耦);
為了說明第二個(gè)原則的重要性,我們先看一段CSS:
#sidebar h3 { font-family: Arial, Helvetica, sans-serif; font-size: .8em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px; }
這些樣式將應(yīng)用到#sidebar下的h3元素。但是,如果我們想把除了font-size和text-shadow之外所有樣式應(yīng)用到footer上面,如果你不使用OOCSS又該如何定義呢?
#sidebar h3, #footer h3 { font-family: Arial, Helvetica, sans-serif; font-size: 2em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px; } #footer h3 { font-size: 1.5em; text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px; }
雖然上面這種方式不算優(yōu)雅,卻也算不上最壞的情況,納尼?難道還有比這更糟的?! 是的,沒有最糟,只有更糟:
#sidebar h3 { font-family: Arial, Helvetica, sans-serif; font-size: 2em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px; } /* other styles here.... */ #footer h3 { font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px; }
你可能已經(jīng)意識到,我們正在辛苦的進(jìn)行著完全沒必要的重復(fù)、重復(fù)、再重復(fù)。OOCSS鼓勵(lì)我們從全局的角度去考慮不同的元素,然后將它們共同的屬性樣式抽象為對象或模塊,從而可以在不同的地方重復(fù)使用。
上述的例子中,大量使用了后代選擇器和ID選擇器,這違背了OOCSS中“獨(dú)立容器和內(nèi)容”。因?yàn)楹蟠x擇器或ID使得內(nèi)容過分依賴于特定的容器,后代選擇器嵌套的越深,這種復(fù)雜性也就越嚴(yán)重。另外,div.header 或 h1.title類似的選擇器也是不可取的,我們推薦的做法是直接使用.header和.title。
以下是OOCSS需要注意的關(guān)鍵點(diǎn):
1. 盡量通過給基礎(chǔ)組件添加多個(gè)類(擴(kuò)展基礎(chǔ)組件的CSS規(guī)則)的方式,來避免(父容器+組件類)這種后代選擇器的使用,從而保持OOCSS的擴(kuò)展性。
2. 時(shí)刻注意不要把基礎(chǔ)組件搞成特定組件,組件是屬于大家的、公共的,不要嘗試私有化。
3. 樣式類的定義盡量不依賴HTML結(jié)構(gòu)和標(biāo)簽(不符合OOCSS第二個(gè)原則)。
4. 避免后代選擇器(如:不要使用類似于.sidebar h3),盡量縮短后代選擇器的長度,或者直接給元素添加相應(yīng)的類(保持層次單純,易于重構(gòu))。
5. 避免使用id作為CSS的選擇器,堅(jiān)持使用類!!(類可以使得樣式表模塊化,易于重用,ID選擇器私有化嚴(yán)重,不利于重用,違背OOCSS思想)。
6. 避免在你的樣式表中給類名附屬一個(gè)元素名(如不要這樣做div.header或h1.title)
7. 除非一些很少的情況,避免使用!important。
8. 使用CSS網(wǎng)格(柵格系統(tǒng));
本文版權(quán)歸黑馬程序員web前端開發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處,謝謝!
作者:黑馬程序員Web前端培訓(xùn)學(xué)院;
首發(fā):http://web.itheima.com/