BEMを使用したもっとも有名なCSS設計手法であるmindBEMding
目次
CSSにおけるBEM/mindBEMdingとは
BEMはCSSの書き方のルールです。
HTMLの要素は以下3つのいずれかに当てはまるという考え方です。
「Block」
「Elements」
「Modifier」
上記3要素の頭文字を取ってBEMという名前がついています。各要素については後述します。
mindBEMdingとは
mindBEMdingはBEMの概念を利用したCSSの書き方のルールです。CSS設計手法、CSS命名規則などと呼ばれる手法の一つです。
どのようにCSSを書いていくか、どのようにclass名を付けていくかなどを取り決めたものです。
MindBEMdingをBEMと呼ぶことが多いです。
なぜBEMを使うのか
- class名を広範囲で使いまわすことがなくなるので、CSSを修正したとき意図しないところまで変更されてしまう事がなくなります。
- ルールを定めることで複数人でコーディングを行ったときにも、それぞれバラバラの書き方にならず統一性が生まれるためメンテナンス性も上がります。
- もっとも有名は命名規則のためプロジェクトメンバーが変わっても対応しやすいです。
BEMのデメリットとしてはclass名が長くなることがあげられます。
BEM（mindBEMding）を使ったCSSの書き方
Block,Elements,Modifierそれぞれにルールがあります。
Block（大枠）
Blockは大枠になる部分、ナビゲーションや、入力フォーム、ヘッダーフッターなど。
Blockは独立していて、再利用することができます。
基本1単語で命名します
1 2 3 | <div class="news"> //Block </div> |
Elements（部品）
Elementsは、Blockのなかに配置される部品です。
Blockの中でのみ存在することができます。
Blockにアンダースコア2つつけ、つづけて1単語をつけます。
1 2 3 4 | <div class="news"> <h2 class="news__title"></h2> //Element <p class="news__text"></p> //Element </div> |
Modifier（状態）
Modifierは、BlockとElementの見た目や動きが異なるもの。色違いなどちょっとした違いがある場合に使用する。
BlockもしくはElementにハイフン2つにつづけて1単語
1 2 3 4 | <div class="news"> <h2 class="news__title--red"></h2> //modifier <p class="news__text"></p> </div> |
BEM(mindBEMding)その他のルール
単語をつなげたい場合はハイフン一つ
1単語で表しきれない場合は単語をハイフンでつなぎます。
1 | <p class="block__element--font-small"> |
特にModifierは1単語ではわかりにくい場合が多い
CSSはclassに指定する（要素セレクタやidには指定しない）
CSSは基本的にclassに対して指定します。要素セレクタやid属性には指定しません。
1 2 3 | /* NG */ h2 {} #id {} |
Elementの表記
block__element__elementのような書き方はできません。見た目もわかりにくくなります。
例えば以下のようには出来ません。
1 2 3 4 5 | <div class="block"> <ul class="block__element"> <li class="block__element__element"></li> </ul> </div> |
新しくにBlockを切る
Blockの中にBlockを入れることは可能です。
1 2 3 4 5 | <div class="block"> <ul class="list"> <li class="list__item"></li> </ul> </div> |
もしくは別名のElementとして用意します。
1 2 3 4 5 | <div class="block"> <ul class="block__list"> <li class="block__item"></li> </ul> </div> |
以上、BEM/mindBEMdingの解説となります。
BEM/mindBEMdingは全てに従うというよりは人それぞれ独自のルールを用いて運用していることが多いです。自分の使いやすいようにアレンジしてみるのも良いと思います。