🗂

BEMとは？CSSの命名規則について詳しくまとめてみた

2025/01/02に公開

CSS

BEM（ベム）というクラスの命名規則があります。

このBEMについて、詳しく解説していきます。

 BEMって何？
BEMは、ウェブサイトやアプリのCSS（デザイン）をわかりやすく管理するためのルールです。

B: Block（ブロック）

E: Element（エレメント）

M: Modifier（モディファイア）
つまり、「部品を分けて考えて名前を付けよう！」という考え方です。たとえば、家を作るときに「部屋（Block）」「家具（Element）」「家具の色（Modifier）」を決めるような感じです。

 BEMの基本ルール
Block（ブロック）
ページの中で「大きな部品」を表します。
例: ヘッダー、ボタン、メニューなど。
Element（エレメント）
ブロックの「中のパーツ」を表します。
例: ボタンの中のアイコン、メニューの中の項目。
Modifier（モディファイア）
ブロックやエレメントの「見た目」や「状態」を変えるもの。
例: ボタンが青色かどうか、メニューが開いているかどうか。

 命名の仕方
BEMでは、クラス名をわかりやすくするためのルールがあります。

Block: block

Element: block__element

Modifier: block--modifier または block__element--modifier

 具体例
ボタン
<button class="button">送信</button>

button はブロック名です。
ボタンのアイコン
<button class="button">
    <span class="button__icon">🎵</span>送信
</button>

button__icon はエレメント名です。
ボタンの色を青にする（モディファイア）
<button class="button button--blue">送信</button>

button--blue はモディファイア名です。

 BEMのメリット
わかりやすい
クラス名を見ただけで「どの部品のどの部分か」がすぐ分かる。
再利用しやすい
同じデザインを他のページでも簡単に使える。
チームで作業しやすい
他の人もクラス名を見て、どの部分のCSSかすぐ理解できる。

 実際の例：メニュー
ウェブサイトのメニューを作るとします。

 HTML
<nav class="menu">
    <ul class="menu__list">
        <li class="menu__item menu__item--active">ホーム</li>
        <li class="menu__item">サービス</li>
        <li class="menu__item">お問い合わせ</li>
    </ul>
</nav>

 CSS
/* Block */
.menu {
    background-color: lightgray;
    padding: 10px;
}

/* Element */
.menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu__item {
    display: inline-block;
    margin-right: 10px;
}

/* Modifier */
.menu__item--active {
    font-weight: bold;
    color: red;
}

 まとめ
BEMは「ブロック」「エレメント」「モディファイア」という考え方で、CSSを分かりやすく管理するルールです。

家を作るみたいに、「大きな部品（ブロック）」→「中のパーツ（エレメント）」→「見た目や状態（モディファイア）」を順番に決めていきます。
これを使えば、デザインがぐちゃぐちゃにならずに管理しやすくなるので、プロの現場でもよく使われています！
何か分からないことがあれば、どんどん聞いてくださいね！ 😊

BEMって何？

BEMの基本ルール

命名の仕方

具体例

BEMのメリット

実際の例：メニュー

HTML

CSS

まとめ

Discussion