OOCSS
Object Oriented CSS（オブジェクト指向CSS）が、プログラミング言語で用いられる「オブジェクト指向」に基づいたCSS設計手法であり、多くのCSS設計手法の基礎となったもの。
OOCSSでは「構造（Structure）と見た目（Skin）を切り離す」「コンテナ（入れ物）とコンテンツ（中身）を切り離す」の2つを原則としている。
SMACSS
SMACSS（スマックス）はOOCSSをベースとして考案されたCSS設計手法で、スタイルのパターン抽出をしやすくするためのカテゴリを用意しているという点が特徴である。
- Base（プロジェクト全体における各要素のデフォルトのスタイルを定義）
- Layout（ヘッダーやフッターなど慣習的にid属性で指定するような大枠のレイアウトを定義）
- Module（見出しやボタンなどレイアウト以外のほぼ全ての再利用可能なパターンを定義）
- State（JS操作によって切り替わるような状態の変化を定義）
- Theme（ページ全体でのテーマ切り替え用スタイルを定義）
BEM（MindBEMing）
Block、Element、Modifierの頭文字を取った設計方法。1つの独立したコンポーネントのかたまりをBlockとし、そのBlockを構成する要素をElement、BlockやElementのバリエーション違い・状態違いをModifierとする。本家BEMから派生したMindBEMingという命名規則があり、一般的にはそちらがBEMとして広く利用されている。
また、BEMには名前被りを防ぎ、一目で用途や構造が分かる独特の記法が採用されているため、SMACSSにあるようなカテゴリ分類という考え方はない。
FLOCSS
OOCSS、SMACSS、BEMといったCSS設計手法のいいとこ取りを目指した日本人エンジニアの谷拓樹さんが開発した設計手法。Foundation、Layout、Objectの3つのレイヤーと、Objectに含まれるComponent、Project、Utilityの3つの子レイヤーで構成されるのが特徴。日本においてはBEMと並んで人気のある設計手法。
