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