BEMを3分間で理解する

はじめに

BEM（ブロック、エレメント、モディファイア）は、フロントエンド開発において再利用可能なコンポーネントとコード共有を実現するための方法論です。
BEMは、Block（ブロック）、Element（エレメント）、Modifier（モディファイア）の頭文字を取ったもので、それぞれの部分を詳しく見ていきましょう。

ブロック (Block)

ブロックは、それ自体で意味を持つ独立したエンティティです。例えば、ヘッダー、メニュー、ボタン、入力フィールドなどがブロックに該当します。

<div class="block">
    ブロックの内容
</div>

使用時のポイント

• ブロックの名前は目的を表していること
  • 以下の質問に対しての答えがブロックの名前になっている
    • 例）Q. これは何？ -> A. これはメニューです
• 他のブロックに影響を与えないようにすること
  • ブロックにはpaddingやmarginを使わないこと
• CSSタグ名やIDは使わないこと

エレメント (Element)

エレメントは、特定の機能を果たすブロックの一部です。エレメントはそのブロックに結びついています。例えば、メニューブロック内のメニューアイテムや、フォームブロック内の送信ボタンがエレメントに該当します。

<div class="block">
    <div class="block__element">
        エレメントの内容
    </div>
</div>

使用時のポイント

• エレメント名は目的を表していること
  • 以下の質問に対しての答えがエレメントの名前になっている
    • 例）Q. これは何？ -> A. これは項目です
• エレメント名はブロック名__エレメント名のようにアンダースコアを2つブロック名とエレメント名の間につける

モディファイア (Modifier)

モディファイアは、ブロックやエレメントの見た目や動作、状態を変えるためのフラグです。例えば、ボタンの無効状態や、メニューアイテムのハイライト状態がモディファイアに該当します。

<div class="block">
    <div class="block__element block__element_modifier">
        変更されたエレメントの内容
    </div>
</div>

使用時のポイント

• モディファイア名は見た目を表していること
  • 以下の質問に対しての答えがモディファイアの名前になっている
    • 例）Q. これの色は何？ -> A. この色はredです
• モディファイア名はアンダースコアを1つブロック名またはエレメント名とモディファイア名の間につける

実践例

BEMの使い方を実践的に理解するために、簡単なカードコンポーネントを作成してみましょう。

<div class="card">
    <div class="card__header">
        カードのヘッダー
    </div>
    <div class="card__body">
        カードのボディ
    </div>
    <div class="card__footer card__footer_highlighted">
        カードのフッター
    </div>
</div>

この例では、

• cardがブロックです。
• card__header、card__body、card__footerがカードブロックのエレメントです。
• card__footer_highlightedがカードフッターの見た目を変えるモディファイアです。

BEMの利点

1. 再利用性: コンポーネントはプロジェクトの異なる部分で再利用可能です。
2. 可読性: コードが読みやすく、理解しやすくなります。
3. 保守性: コードベースの保守と更新が容易になります。

まとめ

BEMは、クリーンで再利用可能かつ保守しやすいコードを書くための強力な方法論です。CSSをブロック、エレメント、モディファイアに構造化することで、スケーラブルで扱いやすいコードベースを作成することができます。

---

1. BEM Quick start