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>
0 件のコメント:
コメントを投稿