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