CSS設計完全ガイド｜BEM・OOCSS・SMACSS・FLOCSSの違いと使い方を徹底解説

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. まとめ：各設計記法の比較

8. おわりに

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