きっかけ
CSSの学習をしていたら、こんな感じのクラス名が出てきました。
Foo__BarFoo--Bar
言語ごとにスネークケース・キャメルケースなどの使い分けがあるかと思いますが、
初学者のわたしとしては、CSSのクラス名ってイマイチどう書くのが正解かハッキリしないな〜と感じていました。
そんな中あらわれたハイフン2つ／アンダースコア２つのクラス名。
調べるとBEM記法という命名法を見つけました。
BEM（ベム）記法とは
CSS設計手法の１つで、クラス名を以下の３つの概念に応じて命名します。
- Block
- Element
- Modifier（モディファイア）
3つの頭文字をとってBEMというわけです。
Block
単体で再利用できる独立した機能のかたまり（コンポーネント）をBlockと呼びます。
例：ヘッダー、検索パーツ
Blockの中に子としてBlockを含める場合もあります。
Element
単体では使用せず、Blockの中で使用する部品をElementと呼びます。
例：検索パーツの入力フォーム
Elementは、属するBlockを明示したクラス名をつけ、アンダースコア２つ__で繋ぎます。
Block__Element
Modifier
BlockやElementのスタイル違い（同様の役割をもつが色や形、状態が違うもの）をModifierと呼びます。
例：入力フォームの枠を丸くしたパーツ
Modifierは、元となるパーツを明示したクラス名をつけ、ハイフン2つ--で繋ぎます。
Block--ModifierElement--Modifier
まとめ
BEM記法では
- Elementならアンダースコア２つ
__ - Modifierならハイフン２つ
--
で繋ぎます。
ちなみに、これらの区切り記号をセパレータと呼びます。
組み合わせによっては「Block__Element--Modifier」なんて形のクラス名もでてきます。
感想
独立した機能ごとにパーツをわけ、再利用可能にする発想はまさにオブジェクト指向ですよね。
Blockの階層が深すぎると、クラス名がとんでもなく長くなってしまう...気もします。
クラス名は様々な工夫の仕方があるようで、つくるものの性質にあわせ柔軟に使い分けたいものです。
BEMの他にも、SMACSSやFLOCSSといった記法もあるそうな。
また、CSSを拡張した言語であるSASSも気になります。
以上、案外奥深いCSSの世界のお話でした。