BEMとは？
Block（ブロック）、Element（エレメント）、Modifier（モディファイア）の略語です。
「ベム」と呼びます。某妖怪人間ではありません。
Block（ブロック）
大きなかたまりを指します。
block, box, header, footer ,card など
Element（エレメント）
Blockに所属する細かな要素です。所属するBlock内だけでCSSが機能します。
title, table, button, inner, category, text など
Modifier（モディファイア）
状態や変化のこと。（key・valueで表すもの）
active, large, strong, red（色の指定）など
BEMの命名規則
[box class=”blue_box”]
{Block}__{Element}
{Block}-{Modifier}
{Block}__{Element}-{Modifier}
[/box]
最初は必ずBlockからはじまり、ElementとModifierの前にそれぞれハイフンやアンダースコアをつけ繋げます。
BEMのソースコード
[box class=”black_box”]
<div class=”card card-large”>
<img src=”#”>
<p class=”card__title”>SampleCard</p>
<button class=”card__button card__button-red”>push</button>
</div>
<div class=”card”>
<img src=”#”>
<p class=”card__title”>SampleCard</p>
<button class=”card__button card__button-blue”>push</button>
</div>
<div class=”card”>
<img src=”#”>
<p class=”card__title”>SampleCard</p>
<button class=”card__button card__button-green”>push</button>
</div>
[/box]
.cardというBlockの中に.titleというElementがあります。サイズが大きなカードは.card-largeという感じでModifierを使用し、クラス名をつけています。
ボタンは.card__buttonというクラスで共通のスタイルを指定し、特有のスタイルについては.card__buttton-redという風にModifierを使用し、クラス名をつけています。
このように命名することで、クラス名を見ただけでどの要素がどういった状態なのか分かりやすくなります。
ちなみに、Sass(scss)を書くとこんな感じになります。
[box class=”black_box”]
.card {
margin-bottom: 20px;
&__title {
font-size: 30px;
padding: 10px;
}
&__button {
margin-riht: 20px;
}
}
[/box]
実際は入れ子ではありませんが、Sassだと入れ子で書けるので、親子関係がとても分かりやすいです。
おまけ：Modifierの使い方
Modifierは、別パターンを作りたいときに使うと便利です。
例えば、ブロック内のテキストと画像の位置が反転するときなどですね。
[box class=”black_box”]
<div class=”box”>
<a class=”box__inner”>
<div class=”box__thumb”><img src=”” alt=””></div>
<div class=”box__right”>
<h2 class=”box__title”>タイトル</h2>
<p class=”box__text”>テキストテキストテキストテキストテキスト</p>
</div>
</a>
</div>
<div class=”box box-reverce”>
<a class=”box__inner”>
<div class=”box__thumb”><img src=”” alt=””></div>
<div class=”box__right”>
<h2 class=”box__title”>タイトル</h2>
<p class=”box__text”>テキストテキストテキストテキストテキスト</p>
</div>
</a>
</div>
[/box]
ちなみに順番を反転させる方法は、CSSに“flex-direction: row-reverce;”を指定すればOKです。
Blockのクラス名(.box)はそのまま残し、-{Modifire}をくっつけたクラス名である.box-reverceをうしろに追加します。
この書き方をすることで、「別パターンがあるな」ということがぱっと見で分かります。
BEMを使って効率的にCSS設計をしよう！
プログラミング初学者だと、CSSの命名に悩んでしまい、作業が進まない・・・なんてことが多々あります。ある程度最初に命名規則を決めておくことで、慣れるまでちょっと時間がかかったとしても、のちに作業効率はグンと上がります。
一緒に毎日学習を積み上げましょう！
