BEM記法を以前よりもっと改善したいという思惑

この記事はBEM記法を自分なりに改良したいという思惑の後続記事です。

前回のまとめ

要点は

1. 単語の区切りに「-」や「_」は使わず、キャメルケースを使う
2. Modifierには「--」は使わず、マルチクラスで表現する
3. 上記2点より「-」「_」「--」は使わなくて済むので、Elementを示すには見慣れない「__」ではなく一番自分の見慣れた「-」を使う
4. マルチクラスで表現されるModifierとBlockと区別するため、Blockの最初の文字は大文字

となります。
サンプルのBEM記法ベースのCSSをこの条件に従って書き直して比較してみると

CSS_based_on_original_BEM

.hoge
.hoge__fuga-piyo
.hoge__fuga-piyo.hoge__fuga--foo_bar_baz

CSS_based_on_my_BEM

.Hoge
.Hoge-fugaPiyo
.Hoge-fugaPiyo.fooBarBaz

これを次のように変えます。

結論

CSS_based_on_my_NEW_BEM

.Hoge
.Hoge__fuga-piyo
.Hoge__fuga-piyo.foo_bar

単語の区切りに「-」や「_」は使わず、キャメルケースを使おうと思っていました

まとめていますように、Blockであることを示すために、Blockの先頭を大文字で記述するようにしています。しかしBlockの先頭以外にも大文字があるとなんとなく見辛く感じたためやめました。単語の区切りには「-」を使うようにしました。

「-」「_」「--」は使わなくて済むので、Elementを示すには見慣れない「__」ではなく一番自分の見慣れた「-」を使おうと思っていました

膨大な量のHTMLやCSSの文字列の中、「-」1文字だと面積が小さく埋もれて見えないので、一度は「--」にしました。しかし「__」のほうが低い位置に表示されるため、なんとなくElement（子要素）感が出て良かったので「__」に戻しました。

実は「(attribute)_(value)」という書き方を知りませんでした

BlockやElementやModifierの属性値についてもBEMである程度表現することができるなんて知りませんでした。

例えば「容量（属性）が500ml（属性値）のペットボトル」と「容量が1Lのペットボトル」は

.Plastic-bottle_capacity_500ml
.Plastic-bottle_capacity_1L

という風に表せます。
（上記の「単語の区切りに『-』を使う」というのは、ここで「_」を使うためだったのです。）

しかし僕だったら結局

.Plastic-bottle.capacity_500ml
.Plastic-bottle.capacity_1L

とマルチクラスなModifier化してしまいますけどね。
ただ、2つの単語の意味のつながりがはっきりするのは非常に良いですね。

けつろぉん。

前回の最後に書いたサンプルCSSを今回の記事に合わせて書き直しました。

.Android {
    font-family: "Droid Sans";
}

.Android.os_kitkat {
    content: "Version 4.4";
}

.Android.os_jelly-bean {
    content: "Version 4.1-";
}

.Android__cyanogen-mod {
}

.Android.os_kitkat .Android__cyanogen-mod {
    content: "Version 11";
}

.Android.os_jelly-bean .Android__cyanogen-mod {
    content: "Version 10-";
}