淺談 CSS 設計模式系列-OOCSS 篇

前言

OOCSS 是 CSS 設計模式的另一種，其中最主要代表的框架就是 Bootstrap。

OOCSS

OOCSS 全名是「Object Oriented CSS」，中文的意思大概是「物件導向 CSS」，另一種中文翻譯是「面向對象 CSS」，其主要設計理念為兩者

Separation of content from container - 內容與容器的分離
Separation of structure from skin - 結構與樣式的分離

透過這兩個設計裡面可以大大增加 CSS 的擴充性以及 CSS 彈性，因此只要你有使用過 Bootstrap，那麼你就已經在無形中學習了 OOCSS 因為 Bootstrap 就是採用 OOCSS 設計，簡單來講就是每一個 class 他都可以獨立的運作。

舉例來講你不需要懂 CSS 你只需要看手冊，你就可以使用 Bootstrap 來套用樣式

1	<h1 class="text-left text-danger d-flex">這是一個 h1</h1>

因此 OOCSS 的設計裡面每一個 class 都是一個可以直接使用的 CSS 獨立個體，在這邊其實也與 SMACSS 的 Module 非常雷同。

Separation of content from container (內容與容器的分離)

在「內容與容器的分離」中有一個重點觀念，不要被排版版型限制，所謂被排版版型限制的意思如下方程式碼

.header {
  color: yellow;
  width: 50px;
  height: 50px;
}
.content {
  color: red;
  width: 50x;
  height: 50px;
}
.footer {
  color: blue;
  width: 50px;
  height: 50px;
}

在上面我們可以看到 .header、.content、.footer 都有相同的 width 以及 height，因此假使若有 100 個地方要使用，不就變成要寫 100 次的 width 以及 height 更不用說後續若要修改寬度時就要改 100 個地方，因此若套用「內容與容器的分離」觀念的話，就會變成這樣

.container {
  width: 50px;
  height: 50px;
}

.header {
  color: yellow;
}
.content {
  color: red;
}
.footer {
  color: blue;
}

因此這三個地方就可以直接在 HTML 上使用 .container。

拿實際案例 Bootstrap 來講的話，Bootstrap 中的格線系統 .container、.row、.col 就是屬於容器的分離，而內容則是 ul>li 或是分頁等等，這些內容可以讓任意讓我們放在容器中任一地方，例如 ul>li 可以放在 header 也可以放在 footer 等處，但若假使你這樣寫 .header ul li 就會變成你的 CSS 被限制在一個區塊內，無法在其他使用。

最後總結一下內容與容器的分離的重點觀念，白話文講就是「內容可以在容器任意之處使用，盡可能避免將內容寫死在特定容器。」

Separation of structure from skin (結構與樣式的分離)

結構與樣式的分離的基礎概念在於拉出共用基礎樣式，然後樣式在額外獨立可套用於他處。

稍等一下，有沒有覺得與 SMACSS Module 很雷同？沒有錯，但在 OOCSS 中只有一個重點，只要你是樣式，就會被獨立出來，舉例來講

.btn {
  width: 20px;
  height: 100px;
  color: red;
  background-color: red;
}

我們會將樣式的 CSS 拉出來增加樣式的可用性

.btn-red {
  color: red;
  background-color: red;
}

.btn {
  width: 20px;
  height: 100px;
}

透過比較生活面的概念來講的話，就是房子的結構與房子的外觀分離，因此我們在使用時就只需要 btn btn-red 就可以增加 CSS 重複性，減少多餘的 Code，基本上所謂的基礎結構類似 width、height 以及 padding、margin 等都可以算是基礎架構的類型，而樣式類主要就是文字色彩、背景顏色以及陰影這類。

其中 OOCSS 中的結構與樣式的分離也有一個叫做 utilities 的觀念，也就是小工具，例如 padding、margin、border 及 width 等都可以作為一個小工具使用

.pt-5 {
  padding-top: 5px;
}

.mt-5 {
  margin-top: 5px;
}

.border-all {
  border: 1px solid #000000;
}

.w-100 {
  width: 100%;
}

透過這些工具類的觀念也可以大大增加 CSS 的可用性。

參考文獻

Object-Oriented CSS