BEMに基づくCSS設計

SCSSを学習するにあたって、BEMによるCSSのクラス名等をおさらいする必要が出てきたのでまとめておく。

BEMとは

Block　Element　Modifier　の頭文字からきており、
Block -> 大きな括り
Element -> ブロックの中の要素
Modifier -> ブロックやエレメントの変化
上記３つを用いた厳格な命名規則が特徴のCSS設計手法。

https://cloudsmith.co.jp/blog/frontend/2021/03/1742107.html

設計規則を設けることで、業務の効率化と多人数での協同作業を円滑に進めることを主な目的とする。

BEMの中にも色々な流派があって、MindBEMdingが主流。

基本はクラスを使って、IDは使用しない。また、クラス名がとても長くなる傾向があるが、人間が理解することを優先して良しとする。

/* 基本の形*/
block__element--modifier

BEMがあるとき・ないとき

スタイルの入れ子があると、優先度を考える必要がある　→　優先度に対応する時間が減る

クラスの流用があったりすると訳が分からなくなる　→　ブロック単位で管理できるので、HTMLの把握が容易

担当が違うスタッフが編集をかける際に理解に時間がかかる　→　容易に把握・対応できる

複数個所で使用するパーツ（ヘッダとフッタのロゴなど）の命名や設定が面倒　→　ブロックが違うので競合を防げる

構成

Block

BEMの中でも大きなくくり。SCSSファイルを分割する基準になる。headerとかnavとか、サイトを構成する大きなパーツを指す。

ブロックはサイト内の別の場所に移動させたとしても、単体で機能することが求められる。また、ブロックの中にブロックを配置してもOK。

Element

エレメントはブロックの内部に構成されるパーツのこと。必ずブロックの配下に存在する。ブロックとはアンダースコア2つでつなぐ。

ブロックとエレメントの関係性は下の通り。所属するブロックの名前を必ずつける。

<div class="block">
    <div class="block__element"></div>
    <div class="block__element--modifier"></div>
</div>

Modifire

モディファイヤはブロックやエレメントが特定の状態変化を表す。疑似要素のhoverやactiveなどが分かりやすい。つなぐ際はハイフン2つを使う。

モディファイヤが適用されたブロック内は、そのモディファイヤを継承させる。

<div class="block--modifier">
    <div class="block--modifier__element"></div>
</div>

NG事例集

/* NG */
.navi ul li {
    font-size: 15px;
}

ul.navi li {
    font-size: 15px;
}

/* OK */
navi__list {
    font-size: 15px;
}

listにスタイルを当てたい場合、子孫要素を列挙していく書き方はしない。また、要素とクラスをつなげる書き方もしない。

あてたいスタイルの要素に直接クラスを振り、どこにも依存させないようにする。

<!-- NG -->
<div class="panel">
    <div class="panel__items--new"></div>
    <div class="panel__items"></div>
</div>

<!-- OK -->
<div class="panel">
    <div class="panel__items panel__items--new"></div>
    <div class="panel__items"></div>
</div>

モディファイヤを使用する場合は、共通しているクラス（この場合はエレメント）も併記する。これをしないとモディファイヤのクラス側にも共通エレメントの設定をコピーしないといけなくなる。

参考書籍