valid,invalid

関心を持てる事柄について

BEM と MindBEMding

CSS 周りで何が起きているかどころか、これまでにどういうパラダイムがあったのかもわかっていないので、昨日初めて BEM という方法論を知った。

BEM

Key concepts / Methodology / BEM

DOM 内の要素とその固まり(コンポーネント)をブロック(Block)、エレメント(Element)、モディファイア(Modifier)に分類して整理するテクニック。ロシア最大の検索・ポータルサイトを提供しているYandexで培われた。

MindBEMding

MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

CSS のクラス名に BEM を適用するために作られた規則。各要素に以下のようなクラス名を与える。

block
block__element
block--modifier
block__element--modifier
block--modifier__element

この表現たしかに幾つかのライブラリで見たことあって、typo かと思っていたが違っていた。(こういうのを見つけた時や困った時にどういう用語で調べればよいのかわからない…という体験が個人的に CSS 周りでよくある…)

慣れると開発者間、デザイナー間でその要素の役割が瞬時にわかる(らしい)。シングルクラスによるマークアップも実現しやすい(らしい)。


なんかどちらも名前、発音(ベム、マインドベムディング)が馴染みにくい気がする。自分とロシア人のセンスがかけ離れているからだろうか?