BEM記法で使える実用的な単語のまとめ

BEM記法（Block、Element、Modifier）は、CSSクラス名をわかりやすくし、再利用性や可読性を向上させるための命名規則です。
詳細はこちらの記事で紹介しています。
本記事では、BEM記法でよく使用される実用的な単語を整理しました。

Block（ブロック）

ブロックは、コンポーネント全体を表します。
コンポーネントの主要な役割を示す言葉を選びます。
 
ブロック専用として適切な単語
・container（コンテナ）
・button（ボタン）
・modal（モーダル）
・slider（スライダー）
・table（テーブル）
・banner（バナー）
 
エレメントとしても使用可能な単語
・header（ヘッダー）
・footer（フッター）
・nav（ナビゲーション）
・menu（メニュー）
・article（記事）
・form（フォーム）
・card（カード）
・list（リスト）

Element（エレメント）

エレメントは、ブロックの中に含まれるパーツや要素を表します。
ブロック内の特定の役割を表す細かな部分に適した単語を使用します。

・title（タイトル）
・subtitle（サブタイトル）
・body（本文）
・content（コンテンツ）
・title（タイトル）
・lead（リード文、冒頭要約）
・description（説明）
・text（テキスト）
・toc（目次、Table of Contents）
・detail（詳細）
・image（画像）
・thumb（サムネイル）
・icon（アイコン）
・item（項目）
・link（リンク）
・button（ボタン）
・label（ラベル）
・input（入力欄）
・checkbox（チェックボックス）
・list-item（リストアイテム）

Modifier（モディファイア）

モディファイアは、スタイルや状態のバリエーションを表します。
要素の見た目や動作の変化を説明する際に使用します。

・active（アクティブな状態）
・disabled（無効化）
・visible（表示）
・hidden（非表示）
・primary（主要な状態）
・secondary（副次的な状態）
・large（大きい）
・small（小さい）
・success（成功）
・error（エラー）
・warning（警告）
・highlighted（ハイライトされた）
・selected（選択された）
・hover（ホバー時）
・focus（フォーカス時）

 

適切な単語を選ぶことで、BEM記法の効果を最大限に引き出せます。
ブロック、エレメント、モディファイアの役割を明確にし、チーム全体で統一感のある命名規則を採用しましょう。