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(リストアイテム)
命名の際には、block__element の形で構造が明確に伝わるようにすることが重要です。
Modifier(モディファイア)
モディファイアは、ブロックやエレメントの状態・バリエーションを表します。
スタイルの変化や機能の違いを明示的に記述できます。
モディファイアに適した単語例
・active(アクティブ状態)
・disabled(無効)
・visible(表示中)
・hidden(非表示)
・primary(主要スタイル)
・secondary(副次スタイル)
・large(大きい)
・small(小さい)
・success(成功)
・error(エラー)
・warning(警告)
・highlighted(ハイライト)
・selected(選択中)
・hover(ホバー時)
・focus(フォーカス時)
モディファイアは、block–modifier や block__element–modifier の形で使い、状態やバリエーションを簡潔に表現しましょう。
まとめ
BEM記法において、明確で一貫した単語選びは、命名規則の効果を最大限に引き出すための鍵です。
クラス名だけで構造や状態が伝わるように設計することで、保守性・再利用性・チーム開発効率が飛躍的に向上します。
プロジェクトの初期段階で、チーム内で使う語彙やルールを共有しておくと、後の開発がスムーズになります。
ぜひ、本記事を命名の参考リストとしてご活用ください。