CSS 周りで何が起きているかどころか、これまでにどういうパラダイムがあったのかもわかっていないので、昨日初めて BEM という方法論を知った。
BEM
Key concepts / Methodology / BEM
DOM 内の要素とその固まり(コンポーネント)をブロック(Block)、エレメント(Element)、モディファイア(Modifier)に分類して整理するテクニック。ロシア最大の検索・ポータルサイトを提供しているYandexで培われた。
MindBEMding
CSS のクラス名に BEM を適用するために作られた規則。各要素に以下のようなクラス名を与える。
block block__element block--modifier block__element--modifier block--modifier__element
この表現たしかに幾つかのライブラリで見たことあって、typo かと思っていたが違っていた。(こういうのを見つけた時や困った時にどういう用語で調べればよいのかわからない…という体験が個人的に CSS 周りでよくある…)
慣れると開発者間、デザイナー間でその要素の役割が瞬時にわかる(らしい)。シングルクラスによるマークアップも実現しやすい(らしい)。
なんかどちらも名前、発音(ベム、マインドベムディング)が馴染みにくい気がする。自分とロシア人のセンスがかけ離れているからだろうか?