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

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```