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

如何不使用 create-react-app 自己打造應用程式

如何不使用 create-react-app 自己打造應用程式

[Week 1] Command Line 入門 & 基本指令

[Week 1] Command Line 入門 & 基本指令

Day07 - 網格排版

Day07 - 網格排版


Comments