BEM(MindBEMding)についてややこしくない説明をしてみた #Rails

エイチームフィナジーアドベントカレンダー2019の20日目は、
今年の10月から中途入社でデザイナーチームにJoinさせて頂いた、デザイナーの@masaki632dが担当します！

背景

直近の自分の役割として、主にマークアップ寄りの仕事が多いのですが、
担当しているサービスでSCSSをBEMというルールの設計方法で実装しており、
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を設計･命名していく

1.　Block（ブロック）　　　　　＝　大きい塊。Elementの親要素。
2.　Element（エレメント）　　　＝　Blockの子要素。
3.　Modifier（モディファイア）　＝　BlockとElementの修飾。

どうやって使うの？

BlockとElementはアンダースコア2つで区切る
例）block__element
BlockとModifierはハイフン2つで区切る
例）block--modifier
ElementとModifierもハイフン2つで区切る
例）block__element--modifier

ファイル例

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

element.html

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

element.scss

.content {
  width: 100%;

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

・「content」というクラスをBlock、その修飾をModifierとした場合

modifier1.html

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

modifier1.scss

.content {
  width: 100%;

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

・「content」というクラスをBlock、その子要素をElementとし、その修飾をModifierとした場合

modifier2.html

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

modifier2.scss

.content {
  width: 100%;

  &__text {
    font-size: 14px;

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

BEMを採用するメリット

複数人での開発がスムーズになる

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

修正対応コストを低減できる

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

コードの再利用性が容易になる

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

などなど、、

まとめ

いかがでしたでしょうか？
BEMで書いたコードを初めて見たときは、クラス名が長くてどうしても複雑そうに見えますが、シンプルで分かりやすく破綻しづらいコードを書くことができるようになります。
もしBEMが採用されているプロジェクトにアサインされているマークアップ担当の方は、ぜひ実際にBEMでコードを書いてみていただければと思います！

BEM(MindBEMding)についてややこしくない説明をしてみた

背景