關於 OOCSS

關於 OOCSS

OOCSS 筆記

oocss 有兩個原則,分離結構與樣式。結構像是元素的大小,樣式像是顏色等。

分離HTML 與 CSS,意即盡量將可共用的樣式提取到單獨的 clas供使用。簡單來說「使用 class 撰寫樣式,每個 class 有其各自用途」

<button class="btn btn-small btn-primary"></button>

其中 

  • btn:規範按鈕的預設樣式
  • btn-small:規範按鈕大小,在這裡指小的
  • btn-primary:規範按鈕的顏色,這裡指橘色

如 Bootdtrap

參考資料

  1. CSS 的模組化方法:OOCSS、SMACSS、BEM、CSS Modules、CSS in JS