BEM・OOCSS・SMACSS・FLOCSS比較｜CSS設計手法の特徴と実務活用法まとめ｜初心者向け

カテゴリー: 上級 タグ: ,

1. はじめに（導入）

CSS設計がなぜ重要かを解説。
ポイント：

  • CSSが肥大化すると管理が困難になる問題。
  • 設計記法を用いることで「保守性」「再利用性」「可読性」が向上する。

2. CSS設計とは？

CSS設計の目的と必要性について解説。

  • 目的：
    • スタイルシートの一貫性を保つ
    • クラスの衝突を防ぐ
    • プロジェクトの拡張・変更を容易にする

3. BEM（Block, Element, Modifier）

BEMとは？

BEMは「Block」「Element」「Modifier」の3つの概念からなる命名規則。

  • Block（ブロック）：再利用可能な独立したコンポーネント
  • Element（エレメント）：ブロックの一部であり依存する要素
  • Modifier（モディファイア）：ブロックやエレメントに変化を加える

BEMの命名規則

block__element--modifier

BEMの具体例

<div class="card">
  <h2 class="card__title">カードタイトル</h2>
  <p class="card__text">カードの本文です。</p>
  <button class="card__button card__button--primary">クリック</button>
</div>
.card {
  border: 1px solid #ccc;
  padding: 20px;
}

.card__title {
  font-size: 18px;
  color: #333;
}

.card__button {
  background-color: gray;
  color: white;
}

.card__button--primary {
  background-color: blue;
}

BEMのメリット

  • クラスの名前が明確でわかりやすい
  • 再利用性が高い

BEMのデメリット

  • クラス名が長くなりがち

4. OOCSS（Object-Oriented CSS）

OOCSSとは？

OOCSSは「構造」と「見た目」を分けて設計する方法。

  • 構造（Structure）：レイアウトのスタイル
  • 見た目（Skin）：デザインのスタイル

OOCSSの具体例

<div class="box">
  <h2 class="title">タイトル</h2>
  <p class="content">コンテンツの本文</p>
</div>
/* 構造 */
.box {
  padding: 20px;
  border: 1px solid #ccc;
}

/* 見た目 */
.title {
  color: blue;
  font-size: 18px;
}

.content {
  color: gray;
}

OOCSSのメリット

  • 再利用性が非常に高い
  • 保守性に優れる

OOCSSのデメリット

  • クラスの構成を考える必要がある

5. SMACSS（Scalable and Modular Architecture for CSS）

SMACSSとは？

SMACSSはCSSを5つのカテゴリに分けて設計する方法。

  1. Base（ベース）：リセットCSSやHTMLタグのスタイル
  2. Layout（レイアウト）：ページ全体のレイアウト
  3. Module（モジュール）：独立したコンポーネント
  4. State（ステート）：要素の状態（表示・非表示など）
  5. Theme（テーマ）：デザインのカスタマイズ

SMACSSの具体例

/* Base */
body {
  margin: 0;
  padding: 0;
}

/* Layout */
.l-header {
  width: 100%;
  background-color: #333;
}

/* Module */
.button {
  background-color: blue;
  color: white;
}

/* State */
.is-hidden {
  display: none;
}

/* Theme */
.theme-dark .button {
  background-color: black;
}


SMACSSのメリット

  • CSSの役割が明確に分けられる
  • 規模の大きいプロジェクトに最適

SMACSSのデメリット

  • 学習コストがやや高い

6. FLOCSS（Front-end Layout and Component Style Guide）

FLOCSSとは？

FLOCSSはSMACSSをベースに、日本で提案されたCSS設計手法。
3つのカテゴリに分ける：

  1. Foundation：リセットCSSや基本的なスタイル
  2. Layout：ページ全体のレイアウト
  3. Component：コンポーネント

FLOCSSの具体例

/* Foundation */
html, body {
  margin: 0;
  padding: 0;
}

/* Layout */
.l-container {
  display: flex;
  justify-content: center;
}

/* Component */
.c-button {
  background-color: blue;
  color: white;
}

.c-button--large {
  padding: 20px;
  font-size: 16px;
}

FLOCSSのメリット

  • モジュール化が進み、開発が効率的
  • 日本のプロジェクトに適している

FLOCSSのデメリット

  • 小規模プロジェクトには過剰になる場合がある

7. まとめ：各設計記法の比較

設計記法特徴適用シーン
BEM命名規則が明確小～中規模のプロジェクト
OOCSS構造と見た目の分離再利用性重視
SMACSSCSSを5カテゴリに分ける大規模プロジェクト
FLOCSS日本向け、SMACSSの発展版中～大規模の案件

8. おわりに

CSS設計記法は、プロジェクト規模やチームの方針によって使い分けることが重要です。
この記事では「BEM・OOCSS・SMACSS・FLOCSS」の違いと実用例を紹介しました。
自身のプロジェクトに最適な手法を選び、CSS設計を効率化しましょう！

実務Tips（ベストプラクティス集）

まずはチームで“ルールを1枚”にまとめる

命名規則（BEM記法）、階層（SMACSS/ITCSS的なレイヤ）、フォルダ構成（FLOCSSのFoundation/Layout/Object…）を A4一枚にまとめましょう。レビューやオンボーディングが高速化します。

BEMは“浅く・短く”

block__elem--mod を基本に、入れ子は2段までを目安にします。深い構造は責務分割で回避し、Specificityを上げすぎないようにしましょう。

OOCSSの“責務分離”を徹底

見た目（skin）と構造（structure）を分けます。例：card（構造）＋is-elevated（見た目）とすることで再利用しやすくなります。

レイヤ設計で“衝突”を未然に防ぐ

@layer reset, base, utilities, components, overrides; のようにカスケードレイヤを活用し、読み込み順と上書きのポリシーを固定化します。

状態はクラスで表現

is-active、is-disabled などの状態クラスはJSから付け外しする想定に。:hover/:focus-visible との併用でアクセシビリティも担保できます。

デザイントークンをCSS変数で

:root { --color-primary: …; --space-2: … } のように、色・余白・フォントサイズを変数化して管理。スケール変更やダークテーマ対応が容易になります。

ユーティリティは“最小限を共通化”

プロジェクト固有の u-mt-8 / u-text-center などは少数精鋭に。乱造すると可読性が落ちるため、追加条件をガイドラインで明確にします。

lint & previewをパイプラインに

Stylelint＋Prettierで構文と書式を強制し、PRにはビルドプレビュー（Storybook/Playroom等）を用意。運用で設計を守る仕組みを作りましょう。

段階的移行のルールを明文化

既存CSSから移行する際は「新規＝新ルール／既存は触る範囲だけリファクタ」の方針に。legacy/ ディレクトリを切って技術的負債を見える化すると安全です。

よくある質問

Q. BEM／OOCSS／SMACSS／FLOCSSの中から何を選べば良いですか？

A. 小〜中規模なら「BEM＋軽いユーティリティ」、中〜大規模なら「BEM＋レイヤ設計（SMACSS/ITCSS/FLOCSS）」がおすすめです。目的は“衝突を避け、再利用と保守を楽にすること”。チームの規模と既存資産で決めましょう。

Q. BEMの入れ子はどこまでOK？

A. 目安は2段まで（block__elem の下にさらに __elem を増やさない）。深くなる場合は要素を新しい block に切り出すか、責務分割で対応します。

Q. 状態（active/disabled）やバリエーションはどう命名しますか？

A. 状態は is-*、見た目のバリエーションは BEM の --modifier を推奨します。例：button button--primary is-disabled。

Q. ユーティリティクラスはどの程度使うべき？

A. 基本は“足りないところを補う最小限”。余白・テキスト整列・表示制御など頻出のみを定義し、濫用してコンポーネントの責務が不明瞭にならないようにします。

Q. CSS変数と設計手法はどう組み合わせますか？

A. デザイントークン（色・余白・フォントサイズ等）は :root のCSS変数で定義し、BEMやオブジェクトに適用します。トークンは“どこでも再利用”、クラスは“意味と構造”を担う分担が効果的です。

Q. 既存のスパゲッティCSSから安全に移行するには？

A. 新規UIは新ルールで作成、既存は触る範囲のみBEM化。レイヤ（@layer）で legacy を最下層に置き、衝突を遮断。Stylelintで新規違反をCIでブロックします。

Q. TailwindなどのユーティリティCSSと併用できますか？

A. 可能です。設計の“芯”にBEM/オブジェクトを置き、微調整やレイアウト補助をユーティリティで。プロジェクト定義のユーティリティに限定し、命名カオスを防ぐのがコツです。