背景

直近の自分の役割として、主にマークアップ寄りの仕事が多いのですが、担当しているサービスでSCSSをBEMというルールの設計方法で実装しており、BEMの知識や考え方をマスターする必要があるため、備忘録を兼ねて記事を書いていきたいと思います。

そのため、自分と同じように 「BEMって？？」 という方や 「BEMをサッと理解したい！」 という方へ、理解度がアップする一助になれば、と思います！

BEMについて

CSSの記述方法論のこと （CSSセレクタの「命名規則」）

BEMは、Block、Element、Modifierという3つの概念を理解できれば、
あとはclass名の命名規則に則って記述するだけの単純な方法です。

MindBEMding
MindBEMding（マインドベムディング）と呼ばれる命名法をベースとしている。
MindBEMding が BEM と呼ばれることが多い。
https://github.com/manabuyasuda/styleguide/blob/master/how-to-bem.md

シングルクラス
「1つの要素に対して、1つのクラスを指定する」で設計している。

以下の3つの概念で、それぞれを分けて考えていくことでCSSを設計･命名していく

① Block（ブロック）　　　　　：大きい塊。Elementの親要素。
② Element（エレメント）　　　： Blockの子要素。
③ Modifier（モディファイア）　： BlockとElementの修飾。

Block と Element は、アンダースコア2つで区切る

block__element

Block と Modifier は、ハイフン2つで区切る

block--modifier

Element と Modifier も、ハイフン2つで区切る

block__element--modifier

「content」 というクラスを Block、その子要素を Element とした場合、
以下の書き方ができます。

index1.html

<div class="content">
  <h1 class="content__title">
    タイトル
  </h1>
  <p class="content__text">
    テキスト
  </p>
</div>

index1.scss

.content {
  width: 100%;

  &__title {
    font-size: 20px;
  }
  &__text {
    font-size: 14px;
  }
}

「content」 というクラスを Block、その修飾を Modifier とした場合、
以下の書き方ができます。

index2.html

<div class="content--red">
  <h1 class="content__title">
    タイトル
  </h1>
  <p class="content__text">
    テキスト
  </p>
</div>

index2.scss

.content {
  width: 100%;

  &--red{
    background-color: red;
  }
  &__title {
    font-size: 20px;
  }
  &__text {
    font-size: 14px;
  }
}

「content」 というクラスを Block、その子要素を Element とし、その修飾を Modifier とした場合、以下の書き方ができます。

index3.html

<div class="content">
  <p class="content__text--red">
    赤いテキスト
  </p>
  <p class="content__text--blue">
    青いテキスト
  </p>
</div>

index3.scss

.content {
  width: 100%;

  &__text {
    font-size: 14px;

    &--red{
      color: red;
    }
    &--blue{
      color: blue;
    }
  }
}

BEMはルールがしっかりしているため、複数の人が開発に関わり、長く運用されるプロジェクトに特に向いていると言えます。
例として、期間限定（キャンペーンページなど）サイトなどでも素早く開発を行えるため、BEM を採用する価値はあります。

BEM は プロジェクトの成長と共に既存ページが変化していくこと を前提に考え出された手法です。内容に変更があった場合、その修正対応コストをできるだけ低減することができます。

BEM は Webサイトを構成するパーツを独立して設計することができるため、コードの再利用が容易になります。（再利用は、CSSだけでなくJavaScript にも及びます。）

などなど、、

いかがでしたでしょうか？
BEMで書いたコードを初めて見たときは、クラス名が長くてどうしても複雑そうに見えますが、シンプルで分かりやすく破綻しづらいコードを書くことができるようになります。

もしBEMが採用されているプロジェクトにアサインされているマークアップ担当の方は、ぜひ実際にBEMでコードを書いてみていただければと思います！