站長(zhǎng)資訊網(wǎng)本篇文章給大家?guī)?lái)了關(guān)于css架構(gòu)oocss的相關(guān)知識(shí)，其中包括分離結(jié)構(gòu)和皮膚、分離結(jié)構(gòu)和內(nèi)容等等總結(jié)，希望對(duì)大家有幫助。
面向?qū)ο缶幊?/span>
如果你有面向?qū)ο缶幊探?jīng)驗(yàn)完全可以略過(guò)這一節(jié)。
在進(jìn)入 OOCSS 的學(xué)習(xí)之前，我們要先了解下面向?qū)ο缶幊獭Ｃ嫦驅(qū)ο缶幊?是1950 年代后期 開(kāi)始在 MIT 的人工智能小組環(huán)境中出現(xiàn)，根據(jù)維基百科：
面向?qū)ο缶幊?(OOP) 是一種編程范式，它將概念表示為具有數(shù)據(jù)字段（描述對(duì)象的屬性）和稱為方法的相關(guān)過(guò)程的“對(duì)象”。對(duì)象是類的實(shí)例，用于相互交互以設(shè)計(jì)應(yīng)用程序和計(jì)算機(jī)程序。
面向?qū)ο筮€有三大特征：繼承、封裝、多態(tài)。
OOP 已經(jīng)在 JavaScript 和后端語(yǔ)言中廣泛使用了幾年，但根據(jù)其原則組織 CSS 仍然相對(duì)較新。通俗地說(shuō)，OOP 是使您的代碼可重用、高效且快速的實(shí)踐。
過(guò)多概念就不用介紹了，來(lái)看看我們?nèi)腴T(mén) JavaScript 的時(shí)候，相信每個(gè)人都學(xué)習(xí)實(shí)踐過(guò)的 Animal 類來(lái)輔助我們理解 OOP：
// 基類 / 父類 class Animail { constructor() {} getName() {} } // 子類 class Cat extends Animail { constructor() {} run() {} jump() {} } // 子類 class Fish extends Animail { constructor() {} swim () {} }
什么是 OOCSS？
概念總是難于理解的，所以我們快速進(jìn)入一個(gè)示例，然后在了解什么是 OOCSS？
在我們還是 CSS 新手的時(shí)候，我們組織 CSS 代碼的時(shí)候，有時(shí)候會(huì)寫(xiě)出如下代碼：
/* 不好的方式 */ .box-1 { border: 1px solid #ccc; width: 200px; height: 200px; border-radius: 10px; } .box-2 { border: 1px solid #ccc; width: 120px; height: 120px border-radius: 10px; }
你不難發(fā)現(xiàn)，代碼中有一些重復(fù)的樣式出現(xiàn)，維護(hù)這段代碼時(shí)，如果你想改變 border-radius 或 border 的屬性值，不得不在兩個(gè)地方同時(shí)修改。
為了便于維護(hù)，我們可以把重復(fù)的代碼提取出來(lái)放到一個(gè)新的類名中，作為基礎(chǔ)類名，這樣當(dāng)有新的更改就不需要去維護(hù)兩份代碼了：
/* 好的方式 */ /* 重復(fù)的代碼 */ .box-border{ border: 1px solid #CCC; border-radius: 10px; } .box-1 { width: 200px; height: 200px; } .box-2 { width: 120px; height: 120px; }
在 HTML 結(jié)構(gòu)中，我們就可以這樣使用了：
<div class="box-border box-1">Learn OOP</div> <div class="box-border box-2">Learn CSS</div>
如果我們把新改的 CSS 代碼抽象下，我們就可以這樣認(rèn)為：
如果我們想讓兩個(gè) div 的樣式達(dá)到理想的效果，沒(méi)有 box-border 這個(gè)公共類名，本身 box-1 和 box-2 單獨(dú)作用是達(dá)不到理想的樣式效果，換句話說(shuō) box-border 是基類 box-1 和 box-2 就是子類。
這就是在 CSS 中硬抽象出來(lái)的 OOP 概念，叫 OOCSS。
不過(guò) OOCSS 的作者 Nicole Sullivan 是用下面這句話來(lái)總結(jié) CSS 的面向?qū)ο缶幊?，?/p>
It’s a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript.
這是一個(gè)重復(fù)的視覺(jué)模式，可以抽象為 HTML、CSS 和可能的 JavaScript 的獨(dú)立片段。
Nicole Sullivan
明白了什么是 OOCSS，相信你對(duì) OOCSS 可以編寫(xiě)出可擴(kuò)展、可維護(hù)的 CSS 也有一定的了解了，而此時(shí)你也應(yīng)該明白，雖然之前我們可能你沒(méi)聽(tīng)說(shuō)過(guò) OOCSS 的概念，但是項(xiàng)目中絕對(duì)在不知不覺(jué)的使用了這個(gè)技能。
好了，接下來(lái)我們來(lái)真正學(xué)習(xí)什么 OOCSS？
OOCSS (Object-Oriented CSS 翻譯為 面向?qū)ο?CSS) 是組織 CSS 的領(lǐng)先的模塊化或基于組件的系統(tǒng)。它是 Nicole Sullivan 在 2008 年在 Web Directions North 大會(huì)上首次提出的。
她同時(shí)提到，在構(gòu)建 OOCSS 時(shí)，抽象是首先要考慮的，但還有兩個(gè)基本原則要遵循：
-
分離結(jié)構(gòu)（structure）和皮膚（skin）。 您應(yīng)該在基礎(chǔ)對(duì)象中保留結(jié)構(gòu)和位置，并在擴(kuò)展類中保留視覺(jué)特征（如 background 或 border）。這樣您就不必覆蓋視覺(jué)屬性。
-
分離容器（container）和內(nèi)容（content）。 永遠(yuǎn)不要在 CSS 中模仿 HTML 的結(jié)構(gòu)。換句話說(shuō)，不要在樣式表中引用標(biāo)簽或 ID。相反，嘗試創(chuàng)建和應(yīng)用描述相關(guān)標(biāo)簽使用的類。并將嵌套類保持在最低限度。
記住這兩個(gè)原則的核心就是編寫(xiě)可復(fù)用和可維護(hù)的樣式。
分離結(jié)構(gòu)和皮膚
皮膚是我們可見(jiàn)的視覺(jué)屬性，例如：
-
Colors 顏色
-
Fonts 字體
-
Shadows 陰影
-
Gradients 漸變
-
BackgroundColos 背景
結(jié)構(gòu)當(dāng)然就是我們不可見(jiàn)的視覺(jué)屬性，例如：
-
Height 高度
-
Width 寬度
-
Position 位置
-
Margin
-
Padding
-
Overflow
這么分離也是有依據(jù)的，給你舉個(gè)生動(dòng)形象的例子，都打過(guò)王者榮耀吧，如果你是忠愛(ài)粉可能還花錢(qián)買(mǎi)過(guò)皮膚，刷刷的一換，英雄瞬間逼格高了不少，我們網(wǎng)頁(yè)的結(jié)構(gòu)和皮膚相互分離和王者的英雄換膚一個(gè)道理。
這個(gè)好例子就是我們上面舉的這個(gè)例子：
/* 好的方式 */ /* 重復(fù)的代碼 */ .box-border{ border: 1px solid #CCC; border-radius: 10px; } .box-1 { width: 200px; height: 200px; } .box-2 { width: 120px; height: 120px; }
在 HTML 結(jié)構(gòu)：
<div class="box-border box-1">Learn OOP</div> <div class="box-border box-2">Learn CSS</div>
分離容器和內(nèi)容
我們對(duì)著下面這個(gè)例子講解：
<!DOCTYPE html> <html> <head> <style> div { font-size: 20px; } div h2 { font-size: 20px; } </style> </head> <body> <div> <h2></h2> <p></p> </div> </body> </html>
上面這個(gè)例子，h2 被鎖定在 menu 這個(gè)容器里面了，如果一不小心改變了 HTML 的結(jié)構(gòu)就會(huì)導(dǎo)致我們寫(xiě)的 CSS 無(wú)效，非常的不便于維護(hù)，而且作用于 h2 標(biāo)簽上的樣式還無(wú)法復(fù)用，真是讓人頭疼。
根據(jù)容器和內(nèi)容分離的原則，我們應(yīng)該讓容器和內(nèi)容有各自的樣式，同時(shí)避免使用標(biāo)簽選擇器，改寫(xiě)得到如下代碼
<!DOCTYPE html> <html> <head> <style> .menu { width: 200px; height: 200px; } .menu-title { font-size: 20px; } </style> </head> <body> <div> <h2></h2> <p></p> </div> </body> </html>
OK，這樣代碼就非常便于維護(hù)和復(fù)用了，切記在項(xiàng)目中，我們應(yīng)該禁止使用和位置相關(guān)的樣式還有標(biāo)簽選擇器。
優(yōu)點(diǎn)和缺點(diǎn)
上面反復(fù)強(qiáng)調(diào)使用 OOCSS 的好處就是 編寫(xiě)可復(fù)用和可維護(hù)的樣式 這兩個(gè)特點(diǎn)，此篇我們來(lái)總結(jié)下 OOCSS 的優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)
-
擴(kuò)展性： OOCSS 允許您在不同元素上自由混合和重新應(yīng)用類，而無(wú)需過(guò)多考慮它們的上下文。一個(gè)項(xiàng)目的新手可以重用他們的前輩已經(jīng)抽象出來(lái)的東西，而不是堆積在 CSS 上。
-
維護(hù)性： 添加或重新排列 HTML 標(biāo)記不再需要您重新考慮整個(gè) CSS 流程。這對(duì)于正在進(jìn)行的大型項(xiàng)目尤其有用。
-
提高網(wǎng)站速度。 減少重復(fù)有助于應(yīng)用程序運(yùn)行得更快。CSS 文件習(xí)慣于隨著網(wǎng)站的復(fù)雜性增加而呈指數(shù)級(jí)擴(kuò)展，從而增加網(wǎng)頁(yè)大小。
-
可讀性： 當(dāng)其他程序員看到您的 CSS 時(shí)，他們將能夠快速理解其結(jié)構(gòu)。
-
快速上手： 尤其是對(duì)了解面向?qū)ο缶幊痰男率謥?lái)說(shuō)。
缺點(diǎn)
雖然使用 OOCSS 有很多好處，但也有一些缺點(diǎn)：
-
不適合小項(xiàng)目： 小型項(xiàng)目不一定需要可擴(kuò)展性、可讀性和可維護(hù)性。
-
增加元素類的數(shù)量： 您可能需要將多個(gè)類添加到一個(gè)元素以說(shuō)明所有樣式元素。這可能會(huì)給不熟悉 OOCSS 的人帶來(lái)一些困惑，并且會(huì)使您的標(biāo)記變得混亂。
-
有一個(gè)學(xué)習(xí)曲線： 如果您正在使用 OOCSS 而您的同事不熟悉它，這將需要他們?cè)诶^續(xù)之前學(xué)習(xí)如何使用它，這需要時(shí)間。
-
無(wú)語(yǔ)義化的類名： 根據(jù)兩個(gè)核心的分離原則，我們代碼中不可能會(huì)出現(xiàn) .btn 這樣一個(gè)類名搞定樣式的情況，我們只會(huì)拆分的很細(xì)，但同時(shí)我們又需要 .btn 這樣的業(yè)務(wù)類名。所以我們需要一種機(jī)制來(lái)解決這個(gè)問(wèn)題。
語(yǔ)義化和可維護(hù)也是需要平衡的，不過(guò)對(duì)于我更需要的是代碼的可維護(hù)，對(duì)于這個(gè)我們可以使用 CSS 預(yù)處理器解決，例如 Sass/Less。
Sass/Less 的繼承
還記得 OOP 編程三大特性吧，其中之一就是繼承，正好對(duì)應(yīng)了 Sass/Less 的 extend，你說(shuō)這不巧了嗎不是。
根據(jù) OOCSS 當(dāng)我們需要一個(gè)按鈕：
/* 不好的方式 */ .button-structure { min-width: 100px; padding: 1em; border-radius: 1em; } .button-skip { color: #fff; background: #55acee; }
<button class="button-structure button-skip"></button>
在 Sass 中，我們可以使用 %placeholder 來(lái)創(chuàng)建對(duì)象，通過(guò) @extend 在類中調(diào)用，將其合在一起。這樣就可以自己組織代碼：
/* 好的方式 */ %button-structure { min-width: 100px; padding: 1em; border-radius: 1em; } %button-skip { color: #fff; background: #55acee; } .btn { @extend %button-structure; @extend %button-skip; }
重點(diǎn)來(lái)了，一個(gè)業(yè)務(wù)類名解決：
<button></button>
Less 的繼承是通過(guò)偽類來(lái)實(shí)現(xiàn)的 :extend 具體參考 Less Extend，這個(gè)就自己去想吧。
總結(jié)
今天，我們先是了解了面向?qū)ο缶幊痰乃枷?，然后根?jù)其核心思想學(xué)習(xí)了在 CSS 中如何使用 OOP，還知道了這種組織代碼的方式就叫 OOCSS，OOCSS 有兩個(gè)核心思想，容器與內(nèi)容、結(jié)構(gòu)和皮膚分離，同時(shí)總結(jié)了 OOCSS 的優(yōu)缺點(diǎn)，并針對(duì) OOCSS 無(wú)語(yǔ)義化這個(gè)重大缺點(diǎn)，我們結(jié)合 CSS 預(yù)處理器 SASS 給了一個(gè)解。
（學(xué)習(xí)視頻分享：css視頻教程）
