初心者でも迷わない！BEM記法の基本と使い方をやさしく解説

---

Block / Element / Modifier の頭文字を取った命名規則で、クラス名を 「役割」→「構造」→「状態」 の順に明確に表す方法です。

---

具体例で理解する

例えば「カード」コンポーネントを作るとします。

---

BEMを使うメリット

1. クラス名だけで役割がわかる

複数ページを作るときに 「この .title ってどこのタイトルだっけ…？」 と迷うことがなくなります。

2. CSS の衝突が起きにくい

.header .title のようなネスト依存が減り、 後から追加したスタイルが別の場所に影響する事故が激減します。

3. 再利用性が高い

Block は独立しているため、別ページに持っていっても壊れません。

4. チーム開発でも読みやすい

フリーランスでも、後から自分が読み返すときに圧倒的に楽になります。

---

よくある迷いポイントとコツ

● Element は Block の中だけで使う

card__title は必ず .card の中にあるべきもの。 外に出すと意味が崩れます。

● Modifier は「状態」だけ

--red や --big のように、 見た目・状態の違いだけ を表すのが基本です。

● ネストしすぎない

BEM を使うと、CSS のネストはほぼ不要になります。 Sass でも 1〜2 階層で十分です。