淺談 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 | .header { |
在上面我們可以看到 .header
、.content
、.footer
都有相同的 width
以及 height
,因此假使若有 100 個地方要使用,不就變成要寫 100 次的 width
以及 height
更不用說後續若要修改寬度時就要改 100 個地方,因此若套用「內容與容器的分離」觀念的話,就會變成這樣
1 | .container { |
因此這三個地方就可以直接在 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 | .btn { |
我們會將樣式的 CSS 拉出來增加樣式的可用性
1 | .btn-red { |
透過比較生活面的概念來講的話,就是房子的結構與房子的外觀分離,因此我們在使用時就只需要 btn btn-red
就可以增加 CSS 重複性,減少多餘的 Code,基本上所謂的基礎結構類似 width
、height
以及 padding
、margin
等都可以算是基礎架構的類型,而樣式類主要就是文字色彩、背景顏色以及陰影這類。
其中 OOCSS 中的結構與樣式的分離也有一個叫做 utilities 的觀念,也就是小工具,例如 padding
、margin
、border
及 width
等都可以作為一個小工具使用
1 | .pt-5 { |
透過這些工具類的觀念也可以大大增加 CSS 的可用性。