淺談 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 (內容與容器的分離)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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 個地方,因此若套用「內容與容器的分離」觀念的話,就會變成這樣

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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 中只有一個重點,只要你是樣式,就會被獨立出來,舉例來講

1
2
3
4
5
6
.btn {
width: 20px;
height: 100px;
color: red;
background-color: red;
}

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

1
2
3
4
5
6
7
8
9
.btn-red {
color: red;
background-color: red;
}

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

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

其中 OOCSS 中的結構與樣式的分離也有一個叫做 utilities 的觀念,也就是小工具,例如 paddingmarginborderwidth 等都可以作為一個小工具使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.pt-5 {
padding-top: 5px;
}

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

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

.w-100 {
width: 100%;
}

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

參考文獻

可以給點牡蠣。
Google AD