BEMとCSSの命名規則

BEMとCSSの命名規則：クラス名ビルダー付き | We.Inc

BEMによるブロック、エレメント、モディファイアの命名方法を、クラス名をチェックするビルダー付きで解説します。ユーティリティクラス、CSS Modules、@scopeとも比較します。

BEMとCSSの命名規則

BEMはBlock、Element、Modifier（ブロック、エレメント、モディファイア）の略です。ブロックは.cardのような独立したコンポーネント、エレメントはその内側でのみ意味を持つ部品で、アンダースコア2つで.card__titleと書きます。モディファイアはバリエーションで、ハイフン2つで.card--featuredと書きます。モディファイアは基本クラスの代わりではなく、必ず基本クラスと並べて付けます。

BEMを1つの表で

部品
パターン
例

ブロック
.search-form

エレメント
block__element
.search-form__input

ブロックのモディファイア
block--modifier
.search-form--compact

エレメントのモディファイア
block__element--modifier
.search-form__button--disabled

キーと値のモディファイア
block--key-value
.search-form--theme-dark

CSSプロジェクトが整然と保たれるか、少しずつ上書きの山になっていくかは、命名で決まります。このページでは公式BEMサイトのルールを解説し、入力に合わせて自分のクラス名をチェックし、現在チームがスタイルの衝突を防ぐために使っているほかの方法とBEMを比較します。

ビルダーにブロック名を入力し、必要に応じてエレメントとモディファイアも入力します。
生成されたクラス名と、それを使うHTMLを確認します。名前がBEMのルールに反すると警告が表示されます。
HTMLとCSSのひな形を自分のコンポーネントにコピーします。

セレクターには単一のクラスだけを使いましょう。.card .card__title のように親クラスを前に付けて書くと、BEMがもともと避けようとしている詳細度の上昇が起こります。
エレメントを.card__body__titleのように連ねてはいけません。HTML内でどれだけ深くにあっても、すべてのエレメントはブロックに直接属します。
モディファイアには基本クラスを並べましょう。モディファイアのクラスだけを付けるのではなく、class="btn btn--large"と書きます。
見た目ではなく、それが何であるかで名前を付けましょう。.alert--errorはデザイン変更後も通用しますが、.alert--redはそうはいきません。
プロジェクトごとに規則を1つ選び、文書にしておきましょう。複数のスタイルが混ざると、どれか1つに統一した場合より読みにくくなります。

よくある質問

BEMは何の略ですか？

Block、Element、Modifier（ブロック、エレメント、モディファイア）の略です。すべてのセレクターを単一のクラスに保つCSSクラスの命名手法で、詳細度が平らに保たれ、クラス名を見ればどのコンポーネントに属するかがわかります。

BEMがアンダースコア2つとハイフン2つを使うのはなぜですか？

「検索フォーム」を表すsearch-formのように、名前の中ではすでに単一のハイフンが使われているからです。区切り文字を2つ重ねることでブロック、エレメント、モディファイアの境界が明確になり、.search-form__submit-buttonは1つのブロックと1つのエレメントとして読めます。

TailwindやCSS Modulesを使う場合でも、BEMを使う価値はありますか？

ユーティリティクラスではコンポーネントのクラス名を書くことがほとんどないため、BEMの重要性は下がります。CSS Modulesではビルドツールが名前のスコープを管理してくれるため、短いキャメルケースの名前が推奨されます。それでもBEMは、素のCSS、Sass、WordPressのテーマ、複数のフレームワークで共有するデザインシステムにとって有力な選択肢です。

エレメントの中のエレメントはどう命名すればいいですか？

親のエレメントではなく、ブロックに結び付けます。カード本体の中のタイトルは、HTMLで.card__bodyの中に入れ子になっていても.card__titleです。入れ子の部品が単独で再利用できるなら、代わりに新しいブロックにしましょう。

命名規則が解決する問題

CSSのクラスはすべて、1つのグローバルな名前空間にあります。2人の開発者が別々のファイルで.titleを書けば、いずれ互いの見出しにスタイルが当たってしまいます。よくある対処法であるセレクターを長くする方法は、詳細度の軍拡競争の始まりです。
規則があれば、すべてのクラスに持ち主ができます。.pricing-card__priceの表示がおかしければどのコンポーネントを開けばよいかがわかり、そのクラスがほかで使われていないと確信してコンポーネントを削除できます。

ブロックがブロックを含むとき

ブロックは別のブロックの中に置けます。カード内のボタンは.btnのままで、カードがその位置を調整する必要があれば、同じ要素に両方のクラスを付けられます。class="btn card__action"のように書きます。
こうして組み合わせると、ボタン自体のスタイルは再利用可能なまま、カードはエレメントのクラスを通じて余白や配置などのレイアウトだけを管理できます。

ネイティブCSSのスコープ機能が追いついてきた

@scopeを使うと、ルールを部分木に限定できます。例えば.cardの中のすべてに適用し、入れ子の.card__mediaの中には適用しない、といった指定です。2026年にBaselineの新たに利用可能な機能になったばかりなので、それだけに頼る前に利用者のブラウザーを確認しましょう。
カスケードレイヤーは関連する問題を解決します。スタイルのグループ全体に優先順位を付けられるので、リセットやサードパーティのテーマは、セレクターの詳細度がどれだけ高くても、自分のコンポーネントより優先されることはありません。

BEMとほかの方法の比較

クラス名の衝突を防ぐ方法

方法
例
名前の一意性を保つのは誰か
最適な用途

BEM
.card__title--large
自分たち、規則によって
素のCSS、Sass、CMSのテーマ

ユーティリティクラス（Tailwind）
text-lg font-semibold
コンポーネント名は不要
コンポーネントで組み立てるアプリ

CSS Modules
styles.cardTitle
ビルドツールが名前を書き換える
バンドラーを使うReact、Vueなど

@scope
@scope (.card) { h2 {} }
ブラウザーがルールの範囲を限定する
新しめのブラウザー、軽いマークアップ

BEMコンポーネントの完全な例

エレメントとモディファイアを持つカードブロック

各セレクターは1つのクラスです。強調表示用のモディファイアは枠線を変え、ブロックのモディファイアを通じて1つのエレメントを反応させます。

BEMのよくある間違い

間違いと正解

間違い
正解
理由

.card__body__title
.card__title
エレメントはほかのエレメントではなく、ブロックに属する

class="card--featured"
class="card card--featured"
モディファイアには基本クラスが必要

.card .card__title
.card__title
余分な入れ子は詳細度を上げる

div.card__title
.card__title
BEMのセレクターはクラス名だけを使う

.card--blue
.card--primary
色ではなく意味で名前を付ける

BEMクラス名ビルダー

ブロック、エレメント、モディファイアを入力すると、クラス名と対応するHTML、CSSを生成します。名前がルールに反すると警告します。

ブロック

エレメント（任意）

モディファイア（任意）

ブロック

エレメント

モディファイア

{label}：__ や -- は自分で入れないでください。区切り文字はビルダーが付けます。

{label}：小文字のラテン文字、数字、単一のハイフンを使ってください。

エレメントはほかのエレメントを含められません。

これらの名前はBEMのルールに従っています。

{label}をコピー

無料で始める · クレジットカード不要

製品

AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
ホワイトラベルプラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
エンタープライズ：SSO、個別の SLA、専任サポート
開発者向け API：自社の SaaS にサイト生成機能を組み込み

ご利用いただける方

制作会社・代理店向け：自社ブランドで再販
フリーランス向け：自分ブランドのビルダーを持つ
ホスティング事業者向け：サービスにビルダーを追加
SaaS プラットフォーム向け：API でサイト作成を組み込み
スタートアップ向け
金融サービス向け
医療・ヘルスケア向け

機能

リソース

会社情報

サイトマップを見る

BEMとCSSの命名規則