トップ > CSS > BEMを使用したCSSのclass名の命名規則

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

CSS

※過去ブログの転記

 

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>

  1. モディファイア↩

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

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