http://getbem.com/

CSS の記述手法の一つで、クソ長いほぼ一意となるクラスを全対象の要素に付与することで、記述する CSS の影響範囲を最小限に限定し、巨大なまったく設計されてないサイトに対しても比較的安全に変更が行えるようにする手法。 セレクタ指定が常に必要最小単位になるので、スタイル自体は大量に書く必要があり、共通化クソくらえの考え方である。

この命名規則は、Block Element Modifier と呼ばれていて、それぞれを記号でダラダラ繋いだものがクラス名になる。

しかし、これはよく考えると、画期的天才的革命的 CSS 設計ではなく、HTML のマークアップに対するよくあるごく一般的な設計思想だということがわかる。

Block とは画面上の大まかな位置を表していて、つまりそれは機能別にわかれていることが多い。 機能が限定されると、そのなかでの要素(Element)は役割を持つので、より意味は鮮明になる。役割によっては、その状態(Modifier)を持つこともあるのでそれに対してクラスを付与するということはよくある。

つまり、header やら main contents やら footer やらの大まかなブロックに対して、文章(p)や、リスト(ul)や画像(img)があり、それが有効(.active)であったりとか強調(strong)であったりする状態があるわけ。

何も新しく無い。HTML の一般的設計方式の CSS による再構築ルールに見える。

↑のような画面を大まかに区切って、文章の構成要素を入れ込んで、それに対して最小限の意味付けをしていくなんてことは、 ほぼ標準的な HTMLタグだけでもできることで、HTML はこう書けと言わんばかりの王道パターンである。

しかし、話として BEM が持ち上がってくるということは・・・ こんな王道パターンすら理解もできない実装もできない人々が HTML を書いているということが多いという現実に対する皮肉だろう。

オブジェクト指向プログラミングにおける多重継承のカオスと単一継承による秩序にも近いものだろう。 多重継承できる言語でも別に多重しないといけない業は無く、別に単一にしてもよい。 文法は無くても規約ですればよい。

現実の死屍累々に対してのうまい設計に仕向ける規約の方便が BEM というわけだ。

つまり、表メッセージとしては

「お前ら馬鹿は HTML すらまともに作れないし、あたりまえのど真ん中の思想も無く、無茶苦茶なメンテ不可能コードが何故無茶苦茶になる理由もわからないのだから、俺たちのルールを思考停止で書いていればいいよ。」

ということである。

しかし現実ではあるのだが、あまりにも仕事する人に対するアキラメというか突き放しというか、リスペクトの無さが酷くないか？

こういう思想がこの BEM 設計思想の裏にチラチラ見えて好きになれない。

実質、意味を意識したタグ階層やクラス階層を作って CSSのセレクタを根本から全部書きましょうというルールとほぼ同義であり。 別に何の画期的なものでもない。

ということは、これの裏の真のメッセージは

「HTML を正しく書こう」

というモノになるのでは？ つまり BEM を推し進めることによって、BEM が否定され、最後にそれ自身が不要になるという味わい深さ。 ・・・という考えならよいな。