Posted at

[CSS]BEMの方法論とMindBEMdingという記法

More than 5 years have passed since last update.


BEMの方法論とMindBEMdingという記法


BEMとは

Block、Element、Modifierの頭文字を取ったものであり、要素を3つのどれかに当てはめて命名していく方法。


  • Block → 構成のルートとなる要素。

  • Element → Blockの子要素。Blockでしか生きられない。

  • Modifier → 元となるBlockまたはElementから変化した状態を表す要素。

オブジェクト指向風に言うと...

Blockは継承元のクラス、Modifierはその派生クラス、Elementはそれらのクラスに所属するメソッドもしくはプロパティである。

参考:BEM-Methodology Definitionsの日本語訳


MindBEMdingとは

BEMをCSSのクラス名に適用するために作られた規則で、CSS界隈ではMindBEMdingがBEMと呼ばれることが多い。お約束として、Elementはアンダースコア2つ(__)、Modifierはハイフン2つ(--)で連結し、BEMの各要素を表現する。


BEM記法

block

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

これをhtmlで書くと、こんな感じになる


html

<div class="block">

<div class="block__element"></div>
<div class="block__element block__element--modifier"></div>
</div>
<div class="block block--modifier">
<div class="block__element block--modifier__element"></div>
</div>

非常にキモイですね。しかし、キモイと思うのは最初だけで、使ってみると、非常に分かりやすく、良いアイデアである。

良いアイデアと言うのは、CSSの設計、その命名のときに考えるのは、それがいかに明白であるかということと、汚染されるリスクを抑えられるか、ということ。つまり、ワードを明確に区切ることで、その機能・カテゴリを区別するという点においては、別に単一記号であろうが、キャメルケース、スネークケースであろうがなんでもいいかもしれない。しかしスタイルが汚染されるリスク、という点でBEMおよびMindBEMdingは優秀である。

参考:Summary of MindBEMding - getting your head ‘round BEM syntax