プログラミング日記：クラス名の付け方逡巡

KROWL中級編の模写にかかる前に、クラス名をちゃんとしたいと思って調べてみたBEMについてまとめ。

「css設計完全ガイド」BEM項目ほんのさわりの部分、クラス命名ルールだけをざっくりまとめた。自分用メモ。

BEMとは・・・

Block　ブロック
Element　エレメント
Modifier　モディファイア

Block
どこでも使い回せるパーツ
buttonとかmenuとか

【クラス名の命名ルール】

・１語の場合
menu
btn　とか

まんまだな〜。

・２語以上
block-name　のパターン
例）global-nav
　　menu-list　とか

間にハイフンを入れるんだな。

ポイントは「何を表しているのか」がすぐわかること！
「はいはいglobalなnavねー」

見た目の特徴（文字の色とか)に引っ張られて名付けてはいけない！

Element
Blockを構成する要素。Block組の構成員。
Blockの外では使えない。Block組から出たらいかん。

【クラス名の命名ルール】
Blockの名前を継承して　”__”　アンダースコア２つでつなぐ

・１語の場合
block__element　のパターン
例）global-nav__link-item
header-menu__link-item

Elementの中に入れ子をしたクラス名はつけない！
詳細度が上がり過ぎるから！
これまた見た目の特徴に引っ張られた名付けはあかん！

別にBlockの中にElementがなくてもいいんだって。
その辺は書いていけばそういう場合も出てくるかな。

Modifier
BlockまたはElementのある状態で、２つ目以降のクラス名としてつける。

"--でつなぐ。
オプション的な立ち位置。
アクティブ表示とか。
ちょっとまだよくわからん。

まとめ
とにかく見た目に引っ張られて名付けるのはあかん。
なんのために使われるのか、役割、機能で名付けること。