きっかけ

CSSの学習をしていたら、こんな感じのクラス名が出てきました。

言語ごとにスネークケース・キャメルケースなどの使い分けがあるかと思いますが、

初学者のわたしとしては、CSSのクラス名ってイマイチどう書くのが正解かハッキリしないな〜と感じていました。

そんな中あらわれたハイフン2つ／アンダースコア２つのクラス名。

調べるとBEM記法という命名法を見つけました。

BEM（ベム）記法とは

CSS設計手法の１つで、クラス名を以下の３つの概念に応じて命名します。

3つの頭文字をとってBEMというわけです。

単体で再利用できる独立した機能のかたまり（コンポーネント）をBlockと呼びます。

例：ヘッダー、検索パーツ

Blockの中に子としてBlockを含める場合もあります。

単体では使用せず、Blockの中で使用する部品をElementと呼びます。

例：検索パーツの入力フォーム

Elementは、属するBlockを明示したクラス名をつけ、アンダースコア２つ__で繋ぎます。

BlockやElementのスタイル違い（同様の役割をもつが色や形、状態が違うもの）をModifierと呼びます。

例：入力フォームの枠を丸くしたパーツ

Modifierは、元となるパーツを明示したクラス名をつけ、ハイフン2つ--で繋ぎます。

BEM記法では

で繋ぎます。

ちなみに、これらの区切り記号をセパレータと呼びます。

組み合わせによっては「Block__Element--Modifier」なんて形のクラス名もでてきます。

独立した機能ごとにパーツをわけ、再利用可能にする発想はまさにオブジェクト指向ですよね。

Blockの階層が深すぎると、クラス名がとんでもなく長くなってしまう...気もします。

クラス名は様々な工夫の仕方があるようで、つくるものの性質にあわせ柔軟に使い分けたいものです。

BEMの他にも、SMACSSやFLOCSSといった記法もあるそうな。

また、CSSを拡張した言語であるSASSも気になります。

以上、案外奥深いCSSの世界のお話でした。