BootstrapやVueを使用した開発で、CSSのクラス設計など強く意識することが少なかった今日このごろ。
たまたま一からスタイルを組む機会があり、改めてその設計規則であるBEMについておさらいしてみました。
BEMとは
Block Element Modifier の頭文字からきており、
Block -> 大きな括り
Element -> ブロックの中の要素
Modifier -> ブロックやエレメントの変化
上記３つを用いた厳格な命名規則が特徴のCSS設計手法。
基本的なルール
書き方
Block__element–modifier の形で命名し、
それぞれアンダースコア２つとハイフン２つで区切る。
＜例＞
<div class="Block">
<div class="Block__element">
<div class="Block__element--modifier"></div>
</div>
</div>ブロック・エレメント・モディファイ
ブロック
- ブロックは一つ一つが独立したパーツとして設計する。
- ブロックの中にブロックを作成してもよい
- ブロック名が重複することはない
エレメント
- 必ずブロックの中に存在する
- エレメント名の重複はOK
モディファイ
- パーツの構成は同じだが、見た目や動作が異なるものに設定する。
（色違いのボタンや非活性のタブなど）
ファイル
SCSSを用い、Blockの名前ごとにファイルを作成して管理する。（ブロック名.scss）
これによってクラス名の重複を防ぐことができる。
SCSSでBEMを表現するとこのようになる。
.Block {
//
&__element {
//
&--modifier {
//
}
}
}バリエーション
BEMは広く使われている規則だが、そのため細かいルールの派生が見られる。
エレメントの入れ子を許容するか、ブロックのモディファイを許容するかなどなど。
運用する際はプロジェクト内ですり合わせを行っておくのが良さそう。
BEMのメリット
- その要素が何者かが明快になる（個性を獲得した要素。ちょっと愛着わくことも。）
- クラス名だけで役割を予測しやすい
- ブロック内でスタイルの影響範囲が完結するため変更がしやすい
まとめ
今回はBEMについておさらいしてみました。
弊社ではUI作成にVueを使用したり（※）、スタイルを付けるのもBootstrapを使うことが多いです。
そのため本格的なCSSの設計を考える機会もあまりありませんでした。
必要に駆られ見直してみて、改めて良くできていて面白い手法だと感じました。
この考え方をうまいこと業務に取り入れられればよいですね。
※単一ファイルコンポーネントではスタイルのスコープをコンポーネント内に定めることができる（コンポーネントスタイルのスコープ）
以上です。最後まで目を通していただいてありがとうございます。
より詳しく知りたい方は、以下の記事が参考になりましたのでチェックしてみてください。
参考
【HTML５・CSS３】CSS設計のBEMを１から理解してマスターしよう！
一番詳しいCSS設計規則BEMのマニュアル
細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）
