linkCSS 設計模式

設計模式（design pattern）是對軟體設計中普遍存在（反覆出現）的各種問題，所提出的解決方案。（摘錄自維基百科）

以下三種設計模式的重點是結構與樣式分離、容器與內容分離。

linkOOCSS

OOCSS (Object Oriented CSS) 的做法是 CSS 的每個 class 當中只有一個設定，HTML 的標籤套用所有需要的 class。舉例如下 :

1link.m24a { margin: 24px auto }

2link.fs24 { font-size: 24px }

3link.fw700 { font-weight: 700 }

1link<h2 class="m24a fs24 fw700">標題</h2>

linkSMACSS

SMACSS (Scalable and Modular Architecture for CSS) 的做法是 CSS 的 class 有些負責結構，有些負責樣式，HTML 的標籤套用結構的 class，之後有需要再套用樣式的 class。舉例如下 :

1link.title2 {

2link    margin: 24px auto;

3link    font-size: 24px;

4link    font-weight: 700;

5link}

6link

7link.title2-alert {

8link    color: #B37399;

9link}

1link<h2 class="title2 title2-alert">標題</h2>

linkBEM

BEM (Blocks, Elements and Modifiers) 的做法是 CSS 的 class 的名稱由區塊、兩個 _ 底線、元素、兩個 - 減號、修飾子所構成，HTML 的標籤套用所需的 class。舉例如下 :

1link.content {

2link    width: 960px;

3link    margin: 30px auto;

4link}

5link

6link.content__title2--alert {

7link    margin: 24px auto;

8link    font-size: 24px;

9link    font-weight: 700;

10link    color: #B37399;

11link}

1link<div class="content">

2link    <h2 class="content__title2--alert">標題</h2>

3link</div>