2021/10/11 (更新日:2022/9/10)

Sass,scssとBEMでスタイルを定義する書き方、BEMの命名規則とは？【初心者向け】

CSS,SCSSで適したクラス名をつけるのに迷いませんか？

クラス名の命名規則を決めるBEM: Block Element Modifierの考え方を説明します。
BEMと相性が良いSassを使ったスタイルの書き方を説明します。
定義したコードを再利用して理解し易いコードが書けるようになります。

私も、開発が楽なので状況に応じてBEMとSassを使ってコードを書くようになりました。

１．SCSSとBEMでスタイルを定義する書き方、BEMの命名規則とは？
２．BEMでスタイルを定義する考え方、命名規則の基本
３．BEMの命名規則でスタイルを定義する書き方
４．BEMの命名規則に従ってSCSSでスタイルを書いてみる
５．まとめ

【ここでお知らせ】

Sassが、LibSassからDartSassに移行していくことになります。

DartSassでの変更項目をまとめた記事は下記を参照ください。

初心者がLibSassをDartSassに移行する方法【@useと@forwardを使いこなす】

１．SCSSとBEMでスタイルを定義する書き方、BEMの命名規則とは？

BEMとは、
Block(かたまり)、Element(要素)、Modifier(修飾)、の略語です。
class名の命名規則が特徴的なCSS設計方法です。

何故、クラスの命名規則を決めるBEMが使われるのでしょうか？

1-1. CSSでスタイルを充てるときの課題

課題１）CSSでスタイルを充てていて、CSSの指定量が多くなり複雑になってくると「どのCSSがどこのHTMLに対応しているか」わからなくなってきます。

課題２）CSSのスタイルが反映されず、「!important」を多用してしまうことがあります。
スタイルの詳細度が把握できず優先度がわからない為です。

課題３）他人が見たらさっぱりわかりません。

1-2. BEMを利用する目的

課題を解決してBEMを利用する目的は、

目的１）設計時に生じる名前の衝突を避ける。
目的２）頭の中を整理してCSSを設計することで開発スピードを速くする。
目的３）作成したコードがメンテナンスし易く、再利用して効率的に開発する。
目的４）他人も理解し易いコードを書く。

２．BEMでスタイルを定義する考え方、命名規則の基本

2-1. BEMの概念

BEMは、 Block、Element、Modifier、の役割が決まっています。
名前をつけて使います。

(1)Block、は大枠となる独立した要素

HTMLでは、Blockはどこにでも設定でき、Blockを他のBlock内にも設定できます。
CSSでは、BlockをBlockに入れ子にして書きません。
なぜなら、Blockは完全に独立したものです。
Blockを別の場所に移動しても、単体で動作する必要があるからです。

Blockは何度も繰り返し使うことが考えられます。
そのためBlockを識別するためにはid属性を使わずclass属性を利用します。

(2)Elementは、Block中の要素

ElementはBlockの構成要素で、そのElementが属するBlock内でのみ意味を持ちます。

Elementのclass名は、必ず所属するBlock名を含んだclass名にする必要があります。

(3)Modifierは、BlockやElementのスタイル

BlockやElementと目的が違い、スタイルや動作などの違いを示します。

Modifierのclass名は、必ず所属するElement名を含んだclass名にする必要があります。
＊混乱するので、Block名を含んだclass名は避けるのをお勧めします。

３．BEMの命名規則でスタイルを定義する書き方

3-1. BEMの命名規則

①Block名
単体の名前

.block

②Element名
blockとelementはアンダースコア２つで区切る
アンダースコア２つで区切る

.block__element

③Modifier名
Elementとmodifierはハイフン２つで区切る
ハイフン２つで区切る

.element–modifier

③名前の付け方
block, element, modifierの名前が複数単語の場合、
単語と単語の間はハイフン１つで区切る
= ただの単語の区切りは、ハイフン１つで区切る

1stname-2ndname

3-2. 命名規則の考え方

命名で注意する項目は、明確で、わかりやすく、管理しやすい名前にすることです。

＊BEMの詳細は、BEMの公式ドキュメントを参照ください。

４．BEMの命名規則に従ってSCSSでスタイルを書いてみる

4-1. Elementの書き方

Elementは、「＆」アンパサンドで親セレクタ名を参照して、ネストして定義する。

＊SCSSの書き方を知りたい方は、こちらから

HTML

<div class="block-examlpe1">
  <div class="block-examlpe1__element-1">
    メインコメント１
  </div>
</div>

SCSS

.block-examlpe1 {
  color:red;

  &__element-1 {
    font-size: 20px;
  }
}

CSS

.block-examlpe1 {
  color: red;
}

.block-examlpe1__element-1 {
  font-size: 20px;
}

4-2. Element内のElementの書き方

Elementは、blockを親にしてネストして定義する。
HTMLの構造に関係なく、HTMLとSCSSの関係は分離して考える。

HTML

<div class="block-examlpe1">
  <div class="block-examlpe1__element-1">
    メインコメント１
    <div class="block-examlpe1__element-12">サブコメント１</div>
  </div>
</div>

SCSS

.block-examlpe1 {
  color:red;

  &__element-1 {
    font-size: 20px;
  }
  &__element-12 {
    font-size: 16px;
  }
}

CSS

.block-examlpe1 {
  color: red;
}

.block-examlpe1__element-1 {
  font-size: 20px;
}

.block-examlpe1__element-12 {
  font-size: 16px;
}

誤りの書き方⇒

やってはいけないSCSSの書き方

✖　htmlの構造に関係つけて、
「element内でさらにelementをネストして定義」
するのは　NG　です。

.block-examlpe1 {
  color:red;

  &__element-1 {
    font-size: 20px;
    &__element-12 {
      font-size: 16px;
    }
  }
}

4-3. Modifierの書き方

Modifierは、「＆」アンパサンドで親セレクタ名を参照して、ネストして定義する。
注意[赤字部]：
Modifierで定義するスタイルはElementで定義している内容も書く。
＝「font-size:20px;は再度書く」

HTML

<div class="block-examlpe1">
  <div class="block-examlpe1__element-1">
    メインコメント１
    <div class="block-examlpe1__element-12">サブコメント１</div>
  </div>
  <div class="block-examlpe1__element-1--blue">
    メインコメント２
    <div class="block-examlpe1__element-12">サブコメント２</div>
  </div>
</div>

SCSS

.block-examlpe1 {
  color:red;

  &__element-1 {
    font-size: 20px;
    &--blue{
      font-size: 20px;
      color:blue;
    }
  }
  &__element-12 {
    font-size: 16px;
  }
}

CSS

.block-examlpe1 {
  color: red;
}

.block-examlpe1__element-1 {
  font-size: 20px;
}

.block-examlpe1__element-1--blue {
  font-size: 20px;
  color: blue;
}

.block-examlpe1__element-12 {
  font-size: 16px;
}

4-4. 少し難しいModifierの書き方

共通部分は、placeholder selectorを使って一箇所にまとめる。
modifierにはelementに対する差分のみを記述するようにする。

HTML

<div class="block-examlpe1">
  <div class="block-examlpe1__element-1">
    メインコメント１
    <div class="block-examlpe1__element-12">サブコメント１</div>
  </div>
  <div class="block-examlpe1__element-1--blue">
    メインコメント２
    <div class="block-examlpe1__element-12">サブコメント２</div>
  </div>
  <div class="block-examlpe1__element-1--green">
    メインコメント３
    <div class="block-examlpe1__element-12">サブコメント３</div>
  </div>
  <div class="block-examlpe1__element-1--yellow">
    メインコメント４
    <div class="block-examlpe1__element-12">サブコメント４</div>
  </div>
</div>

SCSS

.block-examlpe1 {
  color:red;

  %__element-1 {
    font-size: 20px;
  }

  &__element-1 {
    @extend %__element-1;

    &--blue{
      @extend %__element-1;
      color:blue;
    }
    
    &--green{
      @extend %__element-1;
      color:green;
    }
    
    &--yellow{
      @extend %__element-1;
      color:yellow;
    }
  }
  &__element-12 {
    font-size: 16px;
  }
}

CSS

.block-examlpe1 {
  color: red;
}

.block-examlpe1 .block-examlpe1__element-1, 
.block-examlpe1 .block-examlpe1__element-1--blue, 
.block-examlpe1 .block-examlpe1__element-1--green, 
.block-examlpe1 .block-examlpe1__element-1--yellow {
  font-size: 20px;
}

.block-examlpe1__element-1--blue {
  color: blue;
}

.block-examlpe1__element-1--green {
  color: green;
}

.block-examlpe1__element-1--yellow {
  color: yellow;
}

.block-examlpe1__element-12 {
  font-size: 16px;
}