エイチームフィナジー アドベントカレンダー2019 の20日目 を担当させていただきます！
背景
直近の自分の役割として、主にマークアップ寄りの仕事が多いのですが、担当しているサービスで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つのクラスを指定する」で設計している。
BEMでの命名方法
以下の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 とした場合、
以下の書き方ができます。
<div class="content">
<h1 class="content__title">
タイトル
</h1>
<p class="content__text">
テキスト
</p>
</div>
.content {
width: 100%;
&__title {
font-size: 20px;
}
&__text {
font-size: 14px;
}
}
ファイル例②
「content」 というクラスを Block、その修飾 を Modifier とした場合、
以下の書き方ができます。
<div class="content--red">
<h1 class="content__title">
タイトル
</h1>
<p class="content__text">
テキスト
</p>
</div>
.content {
width: 100%;
&--red{
background-color: red;
}
&__title {
font-size: 20px;
}
&__text {
font-size: 14px;
}
}
ファイル例③
「content」 というクラス を Block、その子要素 を Element とし、その修飾 を Modifier とした場合、以下の書き方ができます。
<div class="content">
<p class="content__text--red">
赤いテキスト
</p>
<p class="content__text--blue">
青いテキスト
</p>
</div>
.content {
width: 100%;
&__text {
font-size: 14px;
&--red{
color: red;
}
&--blue{
color: blue;
}
}
}
BEMを採用するメリットは？
複数人での開発がスムーズになる
BEMはルールがしっかりしているため、複数の人が開発に関わり、長く運用されるプロジェクトに特に向いていると言えます。
例として、期間限定（キャンペーンページなど）サイトなどでも素早く開発を行えるため、BEM を採用する価値はあります。
修正対応コストを低減できる
BEM は プロジェクトの成長と共に既存ページが変化していくこと を前提に考え出された手法です。内容に変更があった場合、その修正対応コストをできるだけ低減することができます。
コードの再利用性が容易になる
BEM は Webサイトを構成するパーツを独立して設計することができるため、コードの再利用が容易になります。（再利用は、CSSだけでなくJavaScript にも及びます。）
などなど、、
まとめ
いかがでしたでしょうか？
BEMで書いたコードを初めて見たときは、クラス名が長くてどうしても複雑そうに見えますが、シンプルで分かりやすく破綻しづらいコードを書くことができるようになります。
もしBEMが採用されているプロジェクトにアサインされているマークアップ担当の方は、ぜひ実際にBEMでコードを書いてみていただければと思います！