2016年10月26日水曜日

BEMの基本設計

BEMとは

  • Block
  • Element 要素
  • Modifier(kyevalueで表す) 状態(変化)

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

BEMのお約束

  • BlockElementの区切りはアンスコ2個(__
  • BlockまたはElementModifierの区切りはハイフン2個(--
  • ModifierKeyValueの区切りはアンスコ1(_)
  • BlockElement2つ以上の単語で表す時はハイフン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の命名規則をカスタマイズしてみる

  • BlockElementの区切りはアンスコ1(_)
  • ModifierKeyValueの栗切りはローワーキャメルケースで表わす。
  • BlockModifierまたはElementModifierの区切りはハイフン1(-)
  • BlockElement2つ以上の単語で表す時はローワーキャメルケースにする(複合語の先頭を小文字で書き始める)

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>

 

0 件のコメント:

コメントを投稿