✍️

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

2022/10/09に公開

CSS

概要

所属する社名抜きで、Qiita との書き味の比較として zenn で投稿してみようと思ったのが本投稿のきっかけで、記載内容は Qiita で当時展開している内容とほぼ同じになります。
今回は BEM について、とにかく基本だけ、ややこしくない説明がほしいという方のためになればと思います。

背景

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

BEMについて

BEMとは

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

基本的な考え方や前提

MindBEMding

MindBEMding(マインドベムディング) と呼ばれる命名法をベースとしています。
(MindBEMding が BEM と呼ばれることが多い)

↓詳細を確認したい方は、こちら

基本的にシングルクラス

「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を採用するメリット

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

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

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

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

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

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

などなど、、

まとめ

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

参考

MindBEMding
一番詳しいCSS設計規則BEMのマニュアル
 BEM記法~HTMLコーディングする際のidやclassの命名規則~

概要

背景