Block,Element,Modifierの単位で分解し、定義すること
3つの頭文字をとって「BEMエンティティ」と呼びます
BEMエンティティにおいて、クラス名は半角英数字の小文字
例）container box→container-box
Block
論理的かつ機能的に独立したページモジュール
クラス名の基準として、「それが何なのか」を表します
「見た目」を表す命名は適切ではないです
<div class='red-text'></div>みたいな「赤い文」のように見た目だけのクラス名は避けるようにしましょう
Element
Blockを構成し、Blockの外では独立して使用できないもの
Elementのクラス名はBlockの名前を継承、アンダースコアを二つ記述した後にElementの名前をつける
単語が1つの場合 box__item
単語が複数の場合 box-name__item-name
Blockのパターンと同じように「それが何なのか」を表せるように定義します
ネスト
BEMでは、Elementの中にElementがネストされた命名を推奨していません
- Block内でElementが移動することがある
- いくつかのElementがない状態で、使用することがある
- Elementを後から追加することがある
などの問題点があります
悪い例
<div class='box__item'><a class='box__item__link'></a></div>親要素のクラス名になっています
<div class='container__item'><a class='menu__link></a></div>a要素が親のElement名を含まないようにしています
Modifier
BlockまたはElementの見た目や状態、振る舞いを定義
単独で使用することはできず、BlockかElementのクラス名がある状態で、2つ目以降のクラス名とします
悪い例
<a class="button_size_s"></a>2つ名のクラス名
<a class="button button_size_s"></a>Modifierは2つのタイプに分けれます
真偽値
1語で完結するようなタイプ
「disbaled(使用不可)」「focused(フォーカスされている)」「actived(アクティブになっている)」
などが、あります
<li class=box__item box__item__actived'>box1</li>キーと値のペア
主に見た目と振る舞いに関する指定の際に使用されます
もう少し詳しく言うと、『何』が『どう』であるかです
Mix
実はもう一つ、重要なものがあってそれが「Mix」と、言う考え方です
単一のDOMノードに、異なるBEMエンティティが複数付加されたインスタンス
一つのHTML要素に、役割の異なる複数のクラスが付いてる状態
- コードを複製することなく、複数のBEMエンティティの振る舞いやスタイルを組み合わせる
- 既存のBEMエンティティから、新しいモジュール※を作成する
※「意味を持つインターフェースコンポーネント」
まとめ
...難しいです(￣◇￣;)
いろいろBEMの規制があるのですが、ここをしっかりしておかないとcssで混乱を招きます
BEMのコツ
- DOMモデルではなく、Blockという単位をベースに考える
- IDセレクターと要素型セレクターは使用しない
- 子(孫)セレクターでネストされるセレクターの数は、なるべく少なくする
- 名前の衝突を避けるために、命名規制にきちんと従ったクラス名をつける
- Blockなのか、Elementなのか、Modifierなのかを常に意識する
- BlockまたはElementで変更が頻繁に起こりそうなスタイルのプロパティは、Modifierに移しておく
- Mixを積極的に使用する
- 管理性を高めるために、Blockはひとつひとつがなるべく小さくなるように分割する
- Blockを積極的に再利用する
ちょっと、難しい記事になりました(＞人＜;)
