深入解析一下CSS架構之OOCSS

本篇文章給大家帶來了關於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架構之OOCSS的詳細內容，更多請關注TW511.COM其它相關文章！