BEMとは何か？CSSの設計思想について解説

2021年7月2日2022年10月14日

1. BEMとは
2. BEMの設計思想
3. BEMの使用例
4. なぜBEMが必要なのか
5. 参考

BEMとは

BEMとは、Block（かたまり）、Element（要素）、Modifier（修飾）のそれぞれの頭文字を取った言葉です。CSSの設計思想の１つで、厳密に命名規則を定めることにより、クラス名だけでチーム全体に共通認識を持たせることができます。

BEMの設計思想

BEMはその名前のとおり、Block、Element、Modifierを用いてクラス名を命名します。可読性を向上させることを目的として考案された設計思想です。BlockとElementを「__（二重アンダースコア）」で、Modifierを「_（一つのアンダースコア）」で区切ることにより、そのクラスがどのブロックや要素、修飾を表すのかを一目で理解することができます。

Block

機能的に独立しており、再利用が可能な部品。WebページはBlockの集まりといえます。

Element

Blockに含まれる構成要素。inputやbuttonなどが該当します。

Modifier

BlockやElementの外観や状態、動作を定義します。

BEMの使用例

ここからは、フォームの作成を例として、Block、Element、Modifierの各設計思想に従い、コードをどのように記述していくかを見ていきましょう。

Block

<form class="search-form">
</form>

まずはBlockのみの状態です。ここではformタグに「search-form」というclassを付けました。

Block + Element

<form class="search-form">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

BlockにElementが加わった状態です。「search-form」というclassが付いたformタグの中にinputタグとbuttonタグが入っています。
そのため、inputタグにはformに付けられたclass名に「__」を加え、「input」を加えた「search-form__input」というclass名が付けられています。
同様に、buttonタグには「search-form__button」というclassが付けられています。

Block + Element + Modifier

<form class="search-form">
    <input class="search-form__input">
    <button class="search-form__button search-form__button_disabled">Search</button>
</form>

最後に、Modifierも加わった状態を見ていきます。上述の通り、Modifierは外観や状態、動作を定義する時に使うものです。
今回はbuttonタグに「search-form__button_disabled」というclassが付けられています。
例えば、「規約に同意しましたか？」というチェックボックスにチェックが入っていないと、ボタンを押せないという挙動をする場合は、あらかじめボタンを押せないように設定することがあります。
「ボタンが押せない」という状態を実現するためにclassを追加するため、「search-form__button」のclassに「_」を加え、その状態（disable）を続けた「search-form__button_disabled」というclassが付けられました。

Sassとは

Sass（Syntactically Awesome Style Sheets）とは、CSSを拡張したものです。SassにはSASSとSCSSという記法があります。BEMではSCSS記法を使用すると便利でしょう。上記の例を通常のCSSで書くと以下のとおりです。

.search-form {
    width: 200px;
}

.search-form__input {
    width: 50px;
}

.search-form__button {
    background-color: red;
}

.search-form__button_disabled {
    background-color: gray;
}

.search-form_focus {
    background-color: green;
}

これをSCSSで記述すると、以下のとおりです。SCSSで記述する場合、拡張子は「.scss」になります。

.search-form {
    width: 200px;

    &__input {
        width: 50px;
    }

    &__button {
        background-color: red;

        &_disabled {
            background-color: gray;
        }
    }

    &_focus {
    background-color: green;
    }
}

このようにSCSSを使用するとCSSを入れ子にすることができ、可読性が高まるでしょう。