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

BEM記法（Block、Element、Modifier）は、CSSクラス名の命名規則の一つで、コードの再利用性や可読性を高め、スタイルの管理を効率化するのに役立ちます。
BEMの基本については、こちらの記事で詳しく解説しています。
この記事では、BEM記法でよく使われる実用的な単語を「Block」「Element」「Modifier」に分けて紹介します。
命名に迷ったときの参考に。

Block（ブロック）

ブロックは、独立したUIコンポーネント全体を指します。
クラス名には、そのコンポーネントが何を表すのかを端的に示す単語を使いましょう。
 
ブロック専用に適した単語例
・container（コンテナ）
・button（ボタン）
・modal（モーダル）
・slider（スライダー）
・table（テーブル）
・banner（バナー）
 
エレメントとしても使われることがある単語例
・header（ヘッダー）
・footer（フッター）
・nav（ナビゲーション）
・menu（メニュー）
・article（記事）
・form（フォーム）
・card（カード）
・list（リスト）

Element（エレメント）

エレメントは、ブロック内の構成要素（パーツ）を表します。
名前には、その役割や機能を表す単語を使用します。
 
エレメントに適した単語例
・title（タイトル）
・subtitle（サブタイトル）
・lead（リード文、冒頭要約）
・body（本文）
・content（コンテンツ）
・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記法において、明確で一貫した単語選びは、命名規則の効果を最大限に引き出すための鍵です。
クラス名だけで構造や状態が伝わるように設計することで、保守性・再利用性・チーム開発効率が飛躍的に向上します。

プロジェクトの初期段階で、チーム内で使う語彙やルールを共有しておくと、後の開発がスムーズになります。
ぜひ、本記事を命名の参考リストとしてご活用ください。