CSS設計手法について、SMACSSとBEM比較

SMACSS（スマックス） とは

CSSの設計手法の一つで、Scalable and Modular Architecture for CSS の略。
簡単に言うと、「CSSを管理しやすくするためのルールや考え方」をまとめたもの。

SMACSSの特徴

1. CSSを5つのカテゴリに分ける

   • Base（ベース）：ブラウザのデフォルトスタイルをリセットしたり、タグに直接適用する基本スタイル（例：body { margin: 0; }）
   • Layout（レイアウト）：ページ全体の大枠を決めるスタイル（例：header、main、footer などの構成）
   • Module（モジュール）：ボタンやカード、ナビゲーションなど、再利用できるパーツのスタイル
   • State（ステート）：状態の変化（例：is-active、is-hidden など）
   • Theme（テーマ）：色やデザインのバリエーション（ダークモードなど）

2. クラス名を工夫して分かりやすくする

   • レイアウト用のクラスは .l- をつける（例：.l-header）
   • モジュールは .m- をつける（例：.m-card）
   • 状態を表すクラスは .is- をつける（例：.is-active）

3. スタイルを再利用しやすくする

   • 1つのCSSファイルが複雑にならないように、小さなモジュールごとに管理する
   • 状態（State）を切り替えることでデザインを変更できる

SMACSSのメリット

• CSSが整理されて、管理しやすくなる
• チームで開発しやすくなる
• デザインの変更や追加がしやすくなる

SMACSSの簡単な例

/* Base（ベース） */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Layout（レイアウト） */
.l-header {
  background: #333;
  color: white;
  padding: 10px;
}

/* Module（モジュール） */
.m-button {
  background: #6CC4BE;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}

/* State（ステート） */
.is-active {
  display: block;
}

.is-hidden {
  display: none;
}

/* Theme（テーマ） */
.theme-dark {
  background: #222;
  color: white;
}

SMACSSとBEMの違い

SMACSSとBEMは、どちらもCSSを整理のための設計手法、
それぞれの目的や考え方が異なるが併用も可能。

	SMACSS	BEM
目的	CSSの設計全体を整理し、管理しやすくする	クラス名の命名規則を統一し、再利用しやすくする
構成	Base、Layout、Module、State、Themeの5つに分類	Block（大きな要素）、Element（その内部の要素）、Modifier（状態）に分ける
クラス名の付け方	.l-（レイアウト）、.m-（モジュール）、.is-（状態）などのプレフィックスを使う	block__element--modifier の形式を使う
ファイル構成	カテゴリごとに分ける	クラス名のルールに従って管理

具体的な違いの例

例えば、ボタンのスタイルを作る場合：

SMACSSの場合

/* Layout */
.l-container {
  width: 80%;
  margin: 0 auto;
}

/* Module */
.m-button {
  background: #6CC4BE;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}

/* State */
.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

👉 m-button がモジュール（再利用するパーツ）、is-disabled が状態を表しています。

BEMの場合

.button {
  background: #6CC4BE;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}

.button--disabled {
  opacity: 0.5;
  pointer-events: none;
}

👉 button--disabled という命名で「ボタンの状態が無効である」ことを明示。

---

SMACSSとBEMの併用

SMACSSの設計ルール + BEMの命名規則 を組み合わせると、要素の管理がしやすいかも。

併用の例

/* Layout */
.l-container {
  width: 80%;
  margin: 0 auto;
}

/* Module */
.m-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}

/* BEMを使ってモジュール内の要素を管理 */
.m-card__title {
  font-size: 1.5rem;
}

.m-card__text {
  color: #666;
}

.m-card--highlight {
  background: #6CC4BE;
  color: white;
}

👉 SMACSSの分類（Layout, Module）を使いつつ、BEMの__や--で要素や状態を表す

---

SMACSSとBEMの使い分け

• CSS設計全体を整理したい → SMACSS
• 命名規則を統一し、管理しやすくしたい → BEM
• どちらも使いたい → SMACSSで設計し、BEMでクラス名を管理

---

まとめ

✅ SMACSS → CSS全体のルールや構成を整理
✅ BEM → クラス名の統一ルール
✅ 併用 → SMACSSで設計を決めて、BEMでクラス名を管理