BEM/SMACSS/FLOCSSのおさらい＆つなぐ式スタイル, 2025AW

比較表

設計手法	分類軸	特徴
BEM	Block / Element / Modifier	命名規則ベース（.block__element--modifier）
SMACSS	Base / Layout / Module / State / Theme	役割ベース（5カテゴリ）
FLOCSS	Foundation / Layout / Object	階層ベース（日本発祥、SMACSSベース）

BEM (Block Element Modifier)

<!-- Block -->
<div class="card">
  <!-- Element -->
  <h3 class="card__title">Title</h3>
  <p class="card__text">Text</p>
  <!-- Modifier -->
  <button class="card__button card__button--primary">Click</button>
</div>

特徴：

• block__element--modifier
• 関係性が明確
• 冗長だが安全

Block/Element/Modifier (3層構造)

• Block: 独立した再利用可能なコンポーネント単位
• Element: Block内の構成要素（Blockに依存）
• Modifier: BlockやElementのバリエーション（状態・見た目の変更）

SMACSS (Scalable and Modular Architecture for CSS)

<div class="layout-sidebar">
  <div class="module-card is-active">
    <h3>Title</h3>
  </div>
</div>

特徴：

• Base / Layout / Module / State / Theme の5層
• プレフィックスで分類（layout-, is-, theme-）

（Base/Layout/Module）系

FLOCSS (Foundation, Layout, Object for CSS)

<!-- Foundation (normalize, reset) -->
<!-- Layout -->
<div class="l-container">
  <div class="l-main">
    <!-- Component (汎用) -->
    <div class="c-card">
      <h3 class="c-card__title">Title</h3>
      <p class="c-card__text">Text</p>
      <button class="c-card__button">Click</button>
    </div>
    <!-- Project (プロジェクト固有) -->
    <div class="p-article">
      <div class="p-article__header">...</div>
    </div>
    <!-- Utility (単一スタイル) -->
    <div class="u-mb20 u-text-center">...</div>
  </div>
</div>

特徴：

• Foundation / Layout / Object の3層構造 + Object内分類
• BEMのElement記法（__）を Component/Project 内で採用
• Utilityで細かい調整が可能（余白、テキスト配置など）

（Foundation/Layout/Object）系

• Foundation: リセット、変数定義などベーススタイル（プレフィックスなし）
• Layout: ページレイアウト構造（l-）
• Object: 再利用可能なモジュール群＞３分類に細分化
  • Component: 汎用パーツ（c-）
  • Project: プロジェクト固有パーツ（p-）
  • Utility: 単一目的の補助クラス（u-）

つなぐ式

<header>
  <h1 class="logo">...</h1>
  <nav>
    <a class="navLink">...</a>
  </nav>
</header>

特徴：

• シンプル、短い
• セマンティックHTML + 最小限のクラス
• 親子関係でスタイリング（header .logo, nav a）