スーパーウルトラグレートデリシャスワンダフルブログ

初心者の初心者による初心者のためのブログ

BEMを使用したCSSのclass名の命名規則

CSSでBEMというルールを使用して行う設計方法を初めて知りました。
厳密にはBEMじゃなくてMindBEMding1についてのことをまとめています

MindBEMding

単語 書き方 対象 イメージ
Block block 構成の親となる要素 継承元クラス
Element block__element 子要素 各クラス
Modifier1 block--modifier
block__element--modifier
状態変化を表す メソッド

特徴

  • block と element は__(アンスコx2)で接続
  • block__element__element はNG
  • block もしくは element と modifier は--(ハイフンx2)で接続
  • 単語のつなぎはチェインケース 2
  • modifier の key と value はスネーク(ex. block__element--key_val)
<div class="box">
    <div class="box__ttl">
        <div class="box__ttl--info"></div>
    </div>
</div>
<div class="box-list">
    <div class="box-list__btn">
        <div class="box-list__btn--state_active"></div>
    </div>
</div>

...長すぎる!!!!
本当は単語のつなぎにキャメル使いたいけどjsの時の表記と被るのが気持ち悪い
class名が冗長化する気持ち悪さかjsとの表記被りの気持ち悪さだったら前者を選ぶ
しかし嘘でしょってくらい長すぎる
でもスタイル指定する時に後方一致にのセレクタにすれば楽チン何だろうなとは思う


  1. モディファイア

  2. マインドベムディング

  3. ケバブケースとも言うらしい。串刺しになってるように見えるためらしい