BEMの基本設計

BEMとは

• Block ⇒ 塊
• Element ⇒ 要素
• Modifier(kyeとvalueで表す) ⇒ 状態（変化）

の事を言う。
BEM（ベム）と呼ぶようだが、某妖怪人間ではない。
参考：知っておきたいHTMLテンプレート設計法 - OOCSSの基本 | CodeGrid

BEMのお約束

• BlockとElementの区切りはアンスコ2個（__）
• BlockまたはElementとModifierの区切りはハイフン2個（--）
• ModifierのKeyとValueの区切りはアンスコ1個(_)
• BlockやElementを2つ以上の単語で表す時はハイフン1個(-)

css

.item {…}

 .item-nav {…}

  .item-nav__item {…}

    .item-nav_item--state_active {…}

 .item__body {…}

  .item__body--state_active {…}

html

<section class="item">

  <nav class="item-nav">

    <a class="item-nav__item item-nav__item--state_active" href="#">タブA</a>

    <a class="item-nav__item" href="#">タブB</a>

    <a class="item-nav__item" href="#">タブC</a>

  </nav>

  <div class="item__body item-box__body--state_active">

    …

  </div>

  <div class="item__body">

    …

  </div>

</section>

…アンスコやハイフンが2個続くのが嫌だ。分かりやすいけどクラス名も長い。
下記のように変更してみる。

BEMの命名規則をカスタマイズしてみる

• BlockとElementの区切りはアンスコ1個(_)
• ModifierのKeyとValueの栗切りはローワーキャメルケースで表わす。
• BlockとModifierまたはElementとModifierの区切りはハイフン1個(-)
• BlockやElementを2つ以上の単語で表す時はローワーキャメルケースにする(複合語の先頭を小文字で書き始める)

css

.item {…}

 .itemNav {…}

  .itemNav_item {…}

    .itemNav_item-stateActive {…}

 .item_body {…}

  .item_body-stateActive {…}

html

<section class="item">

  <nav class="itemNav">

    <a class="itemNav_item itemNav_item-stateActive" href="#">タブA</a>

    <a class="itemNav_item" href="#">タブB</a>

    <a class="itemNav_item" href="#">タブC</a>

  </nav>

  <div class="item_body item_body-stateActive">

    …

  </div>

  <div class="item_body">

    …

  </div>

</section>