初心者向け「OOCSS・BEM・SMACSS・FLOCS」CSS設計まとめ

OOCSS

OOCSS（Object Oriented CSS）は、オブジェクト指向にもとづいて考案された設計思想。TwitterやGitHubなどで採用されており、身近なところでいうとBootstrapがこの思想のもとに設計されている。

• Container（入れ物）とContents（中身）を分けて考える
  • .container > .contentsのように依存関係にせず、.containerと.contentsを独立させる（再利用性が向上）
• Structure（基本構造）とSkin（見た目）を分けて考える
  • .btnで基本構造を定義し、.btn-primaryで見た目を変更する

BEM

BEM（Block Element Modifier）は、独特な命名規則（MindBEMding）で有名な設計思想。OOCSSはマルチクラス（クラスを組み合わせて使う）のに対し、BEMはシングルクラス（ひとつのクラスで定義する）なのでメンテがしやすい。

• BEM
• Quick start / Methodology / BEM

特徴

• Block
  • もととなる要素
• Element
  • Block内にある子要素
• Modifier
  • 変化した状態を表す要素

3つをBlock__Element–Modifierのように結合してクラス名を決める。
Elementはアンダースコア2つ（__）で結合、Modifierはダッシュ2つ（–）で結合する。

サンプルコード

SMACSS

SMACSS（Scalable and Modular Architecture for CSS）は、OOCSSやBEMの流れをうけて考案された設計思想。

• Scalable and Modular Architecture for CSS

特徴

• Base
  • reset.cssやnormalize.css
  • サイト全体のデフォルトスタイルを定義する
• Layout
  • Moduleの配置を決める
  • プレフィックスに「l-」をつける（例: .l-main、.l-sub）
• Module
  • 再利用可能なパーツ
  • 親モジュールの名前をプレフィックスにつける（例: 親: .item、子: .item-box）
• State
  • LayoutやModuleの変化した状態
  • プレフィックスに「is-」をつける（例: .is-active、.is-error）
• Theme
  • LayoutやModuleのTheme（色を管理する）
  • プレフィックスに「theme-」をつける（例: .theme-color）

サンプルコード

FLOCSS

FLOCSS（たぶんFoundation Layout Object CSS）は、OOCSSやBEM、SMACSSの流れを受けて考案された設計思想。

• hiloki/flocss: CSS organization methodology.

特徴

• Foundation
  • reset.cssやnormalize.css
  • サイト全体のデフォルトスタイルを定義する
• Layout
  • Objectの配置を決める
  • ページ単位で唯一の存在になるのでidセレクタを使う
• Object
  • Component
    • 再利用可能なパーツ
    • プレフィックスに「c-」をつける（例: .c-btn、.c-btn_primary）
  • Project
    • Componentにするほどでもないパーツ
    • プレフィックスに「p-」をつける（例: .p-article、p.article__title）
  • Utility
    • 汎用クラスで単一のスタイルを持つ
    • プレフィックスに「u-」をつける（例: .u-clearfix、.u-block）

BEMとおなじMindBEMdingという命名規則が用いられている。
また、ディレクトリ構成も構造に合わせて分割することで、メンテしやすくなっている。

サンプルコード