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の簡単な例**
```scss
/* 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の場合**
```scss
/* 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の場合**
```scss
.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の命名規則** を組み合わせると、要素の管理がしやすいかも。

#### **併用の例**
```scss
/* 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でクラス名を管理**