BEM：Block Element Modifierの命名
Block-Element-Modifierメソドロジーを適用し、予測しやすく再利用可能なクラス名を作成します。
「BEM：Block Element Modifierの命名」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
BEMとは
BEM（Block–Element–Modifier）は、意味がわかるクラス名を作る命名規則です。CSSコンポーネントの動作を予測しやすくし、クラス名自体がドキュメントの役割を果たします。
ブロック
ブロックとは、単独で意味を持ち、独立して存在できるUIコンポーネントです。コンポーネントのルートクラスになります。
<div class="card">Card block</div>
<nav class="nav">Nav block</nav>
<button class="button">Button block</button>
<form class="search-form">Search form block</form>エレメント
エレメントとは、ブロックの子要素であり、そのブロックの外では意味を持たないものです。エレメントにはダブルアンダースコアを使います：.block__element。
<div class="card">
<div class="card__image">Image</div>
<div class="card__body">
<h2 class="card__title">Title</h2>
</div>
</div>
<nav class="nav">
<div class="nav__item"><a class="nav__link" href="#">Link</a></div>
</nav>モディファイア
モディファイアとは、ブロックまたはエレメントのバリエーションや状態です。モディファイアにはダブルハイフンを使います：.block--modifier。
<button class="button button--primary">Primary</button>
<button class="button button--large">Large</button>
<div class="card card--featured">Featured Card</div>
<nav class="nav">
<div class="nav__item nav__item--active">Active Item</div>
</nav>BEMの完全な例
BEMの命名を使ったカードコンポーネントです。
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button button--primary card__action" href="#">Read More</a>
</div>
</div>BEMのCSS構造
BEMのカードに対応するCSSです。
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button card__action" href="#">Read More</a>
</div>
</div>BEMによる詳細度の利点
BEMのクラスはすべて単一クラス（詳細度 0,1,0）です。どのセレクターもほかのセレクターより詳細になることがないため、適切なモディファイアクラスを追加するだけで簡単に上書きできます。
BEMでよくある間違い
BEMでは、次の落とし穴を避けてください。
- 多階層のエレメント：
.card__body__titleは.card__titleのように平坦化する - HTML内で、所属するブロックの外にエレメントを置く
.nav__link aのようなエレメントセレクターを使う。不要な詳細度が加わります
CSSカスタムプロパティとBEM
BEMとCSS変数は自然に組み合わせられます。ブロックレベルのトークンを定義し、モディファイアで上書きします。
<button class="button">Default</button>
<button class="button button--danger">Danger</button>BEMを使わない場面
BEMは冗長であり、ユーティリティクラスや一度しか使わないスタイルには適していません。Tailwindのようなユーティリティファーストのフレームワークは、BEMを完全に置き換えます。意味のある命名が重要なカスタムコンポーネントライブラリには、BEMを使ってください。
実践でのBEM
多くのデザインシステムでは、BEMの派生形や類似した命名方式が使われています。具体的な構文よりも、ブロック → エレメント → モディファイア、深い入れ子にしない、詳細度を平坦に保つという一貫した原則のほうが重要です。
クイックチェック
BEMで、「card」ブロック内の「title」という名前のエレメントを表す構文はどれですか。
まとめ
BEMでは、Block、Element、Modifierの命名を使います：.block__element--modifier。すべてのクラスが単一クラスであるため、詳細度を平坦かつ均等に保てます。エレメント（__）はブロックの内側に属します。モディファイア（--）でバリエーションを作ります。.card__body__title のような深い入れ子は避け、.card__title のように平坦化してください。
よくある質問
「BEM：Block Element Modifierの命名」レッスンは無料ですか？
はい。「BEM：Block Element Modifierの命名」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「BEM：Block Element Modifierの命名」で何を学びますか？
Block-Element-Modifierメソドロジーを適用し、予測しやすく再利用可能なクラス名を作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「BEM：Block Element Modifierの命名」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- CSSアーキテクチャが重要な理由
- BEM：Block Element Modifierの命名
- ファイル構成：ITCSSと7-1パターン
- 詳細度の競合を避ける