【CSS設計】BEMについて1日考えてみた #CSS

はじめに

皆さんは普段コーディングをする際、cssに対してどのような「設計」をしていますでしょうか？
- BEM
- SMACSS
- FLOCSS
- OOCSS
- ECSS
...などなど色々な方法があると思います。
中にはこれらを複合して使ってみたり独自で開発している方もいるのではないでしょうか。

私はよくBEMでコーディングをしています。
仕事でコーディング規約を作ることになったのですが、自分が使っているBEMって合っているのか...BEＭにわかなんじゃないか...と気になったので、少しまとめてみました。

BEMとMindBEMding

なんとBEMには種類があるみたいです(種類があったら派閥ができてややっこくならないのかな...)

BEM

BEMの公式によると、


<div class="block">
    <div class="block__element">
        <div class="block__element block__element_modifier">
            hogehoge
        </div>
        <div class="block__element block__element_modifier">
            hogehoge
        </div>      
    </div>
</div>

上記のように、
- blockは小文字始まり(あくまでも公式内では)

elementはアンスコ2つで表現
例) .block__element
modifierはアンスコ1つで表現
例) .block__element_modifier
また、modifierのkeyとvalueをアンスコを繋げて表現することも可能
例) form__submit_size_s
などform__submitの「sizeがsだよ」という状態を表すことができる。ちなみにMindBEMdingではこの記法は使わない。
単語を区切るときはケバブケースを使うらしい。
例) .block-name .block__element-name

など公式には他にも様々なルールが載っています。
私は記事などを見てなんとなく書いていたBEMにわかなので、驚いた部分が多々ありました。

MindBEMding

BEMをCSSのクラス名に適用するための規則でこの記法が「BEM」と呼ばれることが多いらしい。
私もてっきりBEMはこれしかないと思っていました。

MindBEMding公式によると、


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

elementはアンスコ2つで表現
例) .block__element
modifierはハイフン2つで表現
例) .block__element--modifier block-name--modifier
こちらも単語を区切るときはケバブケースを使うらしい。
例) .block-name .block__element-name

その他

見たことのあるBEM...?記法

Block Block__Element
アッパーケースのようなもの
blockName blockName__elementName
キャメルケースのようなもの
block_name block_element-modifier
アンスコ/ハイフンそれぞれ1つなもの

まとめ

おそらくどれも正解不正解はないのでしょうが、
「BEM」を使うときは公式にしたがって書くべきだなーと思いました。
「googleは何を使ってる？」「githubは？！」と調べながらやってみましたが、BEMの世界は思ったより深そうです...