首頁技術(shù)文章正文

Web前端開發(fā)培訓(xùn)之淺析OOCSS

更新時間:2016年11月23日14時44分來源:傳智播客web前端開發(fā)培訓(xùn)學(xué)院瀏覽次數(shù):

——前言、
隨著Web技術(shù)的發(fā)展，每一個網(wǎng)站都離不開CSS（層疊樣式表），它的出現(xiàn)將Web內(nèi)容與表現(xiàn)（也可以稱作結(jié)構(gòu)與樣式）做到了真正的分離，因此CSS已經(jīng)成為前端開發(fā)人員的基礎(chǔ)必備技能。
1
會用CSS的人都有這樣一種感覺：它實在太簡單了！沒錯，CSS的語法是最常見的鍵值形式（屬性名：屬性值），常用的樣式屬性也就那么幾十種。在掌握了選擇器、布局定位、盒模型以及常用的樣式之后，編寫一個漂亮的網(wǎng)站完全沒有問題。當(dāng)我們從新手變成老手做過無數(shù)漂亮網(wǎng)頁之后，你是否有過這樣的疑惑：那些常用的樣式屬性，我每天都要敲上幾十遍甚至上百遍，它們難道就不能精簡一下，解放雙手給我騰出一杯coffee的時間嗎？

答案是肯定的！學(xué)過后臺開發(fā)語言的人應(yīng)該知道：思想是靈魂，凌駕于代碼之上；下面我們通過“流行的CSS思想”系列文章來了解一些當(dāng)下正在流行的CSS思想。
1
OOCSS

定義：OOCSS（Object Oriented CSS）顧名思義，就是面向?qū)ο蟮腃SS，讓我們以面向?qū)ο蟮乃枷霝橹笇?dǎo)，編寫出可重用，可擴展，易維護的CSS樣式，因此它不是一門新的編程語言或者技術(shù)，也不是新的語法，它只不過是一種書寫CSS的方法和規(guī)范。

OOCSS的核心就是用最簡單的方式編寫最整潔，最干凈的CSS代碼，避免出現(xiàn)一鍋粥式的雜亂無章（編寫時麻煩，修改時頭疼，改版維護時難于上青天）。

OOCSS最重要的是從項目的頁面中分析抽象出“對象”組件，并給這些對象創(chuàng)建CSS規(guī)則，最后完善出一套基礎(chǔ)組件庫，then,我們新建頁面時為元素應(yīng)用已有的樣式規(guī)則，只須重寫少量的甚至不寫任何樣式，就能創(chuàng)建一個漂亮的頁面，解放雙手指日可待。

引用OOCSS之父Nicole Sullivan的話來說，面向?qū)ο蟮腃SS有兩個原則：

獨立的結(jié)構(gòu)和樣式（Separation Of Structure From Skin）
獨立的容器和內(nèi)容（Separation Of Containers And Content）

獨立的結(jié)構(gòu)和樣式（皮膚）：幾乎每個元素在同一頁面上具有不同的視覺表現(xiàn)形式（即皮膚，例如：登錄按鈕的皮膚和退出按鈕的皮膚），并在不同的頁面上重復(fù)應(yīng)用此皮膚樣式。

把元素的結(jié)構(gòu)樣式和皮膚樣式獨立出來作為基礎(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;
}

上面三個元素的樣式是唯一的，并且它們用不可重用的ID選擇器來定義各自的樣式。但他們也有一些共同的樣式屬性，比如灰色的邊框、陰影樣式，隨著一點點地分析與合并，我們最終會抽象出共同的皮膚樣式：

.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)在，所有的樣式都使用類來定義。同時，我們將共同的樣式提煉為一個可重用的“皮膚”，避免了那些不必要的自我重復(fù)。將“皮膚”樣式應(yīng)用于任何元素都可得到相同的視覺效果，這就是OOCSS所倡導(dǎo)的“通過盡量少的樣式來編寫高復(fù)用的CSS”。

獨立的容器和內(nèi)容：把內(nèi)容從容器中分離出來，使內(nèi)容不再局限于特定的容器，換句話說也就是使任何容器接受任何形式的內(nèi)容。此原則關(guān)注的是對象的重用性（將模塊的內(nèi)容和容器解耦）；

為了說明第二個原則的重要性，我們先看一段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)意識到，我們正在辛苦的進行著完全沒必要的重復(fù)、重復(fù)、再重復(fù)。OOCSS鼓勵我們從全局的角度去考慮不同的元素，然后將它們共同的屬性樣式抽象為對象或模塊，從而可以在不同的地方重復(fù)使用。

上述的例子中，大量使用了后代選擇器和ID選擇器，這違背了OOCSS中“獨立容器和內(nèi)容”。因為后代選擇器或ID使得內(nèi)容過分依賴于特定的容器，后代選擇器嵌套的越深，這種復(fù)雜性也就越嚴(yán)重。另外，div.header 或 h1.title類似的選擇器也是不可取的，我們推薦的做法是直接使用.header和.title。

以下是OOCSS需要注意的關(guān)鍵點：
1. 盡量通過給基礎(chǔ)組件添加多個類（擴展基礎(chǔ)組件的CSS規(guī)則）的方式，來避免（父容器+組件類）這種后代選擇器的使用，從而保持OOCSS的擴展性。

2. 時刻注意不要把基礎(chǔ)組件搞成特定組件，組件是屬于大家的、公共的，不要嘗試私有化。

3. 樣式類的定義盡量不依賴HTML結(jié)構(gòu)和標(biāo)簽（不符合OOCSS第二個原則）。

4. 避免后代選擇器(如：不要使用類似于.sidebar h3)，盡量縮短后代選擇器的長度，或者直接給元素添加相應(yīng)的類（保持層次單純，易于重構(gòu)）。

5. 避免使用id作為CSS的選擇器，堅持使用類?。。惪梢允沟脴邮奖砟K化，易于重用，ID選擇器私有化嚴(yán)重，不利于重用，違背OOCSS思想）。

6. 避免在你的樣式表中給類名附屬一個元素名(如不要這樣做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://xamj520.com/web/

上一篇：Web前端開發(fā)培訓(xùn)之20個很有用的CSS技巧 下一篇：Web前端開發(fā)培訓(xùn)之41個JavaScript實用技巧