CSS 的模組化(OOCSS、SMACSS、BEM)


Posted by hoyi-23 on 2021-07-19

OOCSS(Object Oriented CSS)

  1. 分離結構與樣式 (例如: btn btn-small btn-primary)
  2. 分離HTML與CSS,表示盡量將可共用的樣式提出成為單獨class以供使用

可以經由組合各種class來產生結構樣式。
使用OOCSS的例子: Bootstrap

SMACSS

  1. 使用結構分類: base/layout/module(list-item)/state(link-active)/theme(link-dark)(其實這樣的分類有時會讓人感到模糊)
  2. 有命名的規則: 名稱使用 dash 分隔。

BEM (Block Element Modifier)

BEM 的方法: 將介面切割成多個獨立區塊,以區塊(Block)、元素(Element)和修飾子(Modifier)來命名。

  1. 可以明確知道class的相依性。
  2. 命名規則: Element 使用雙底線做分隔,Modifier 使用雙 dash 做分隔。

Block : menu
Element: menu__title menu__item
Mofidier: `menu__item--active```


#OOCSS #BEM #SMACSS #CSS模組化







Related Posts

Windows Terminal 簡單紀錄

Windows Terminal 簡單紀錄

[BE201] 後端中階:部署:Nginx + PM2

[BE201] 後端中階:部署:Nginx + PM2

COSCUP 2020 貼紙蒐集者

COSCUP 2020 貼紙蒐集者


Comments