BEMの目的と改良の目的
- 標準規約でコーディングすることにより納品物のクオリティを上げる
- ルール統一によりチーム間連携しやすくする
- コーディング時にルールで悩まないようにする
- 標準のBEMは冗長に感じるのでミスが少なく時間のかからない手法に改良する
標準的なBEMのルール
Block（ブロック）
.form {}
.header-nav {}
Element（エレメント）
.form__btn {}
.header-nav__item {}
.header-nav__item_link {}
Modifier（モディファイア）
.form__btn--state_hover {}
CSSセレクタにタグ名を書かない
NG
<style>
.user-list {}
.user-list > li {}
</style>
<ul class="user-list">
<li>name1</li>
<li>name2</li>
</ul>
OK
<style>
.user-list {}
.user-list__item {}
</style>
<ul class="user-list">
<li class="user-list__item">name1</li>
<li class="user-list__item">name2</li>
</ul>
標準的なBEMの問題点
- _を2重に書く必要があり、二つ書いたつもりという表記ミスを起こす可能性がある
- エレメントは_を2重、モデファイアは-を2重に書くため表記が長くなり、コーディングにも時間がかかる
- CSSセレクタにタグ名を書いてはいけないのでコーディングに時間がかかる
使いやすく改良したBEM
一貫した規則と機械可読性さえあれば各区切り文字は変えたり消したりしても良いことになっている
とあるので、ルールに出来る限り沿って現場で使いやすく改良を試みる。
【改良】Block（ブロック）
.form {}
.headerNav {}
【改良】Element（エレメント）※改良後
.form_btn {}
.headerNav_item {}
.headerNav_itemLink {}
【改良】Modifier（モディファイア）※改良後
.form_btn-stateHover {}
【改良】CSSセレクタにタグ名を書いて良いことにする
ulの子セレクタはliに決まっているし、さらに中にブロック、エレメントが入らないと分かっている場合はタグ名を入れて良いルールに変更
ただ、このルールは規約違反なので、しっかりとチーム内で共有する必要がある。
<style>
.userList {}
.userList > li {}
</style>
<ul class="userList">
<li>name1</li>
<li>name2</li>
</ul>
【改良】IDも同様のルール
<style>
#searchForm {}
#searchForm .serchForm_btn {}
</style>
<form id="searchForm">
<input type="submit" class="serchForm_btn">
</form>
【改良】classのセレクタは一つに留める
NG
<style>
.headerNav {}
.headerNav .headerNav_item {}
</style>
OK
<style>
.headerNav {}
.headerNav_item {}
</style>
【改良】ファイル名も規約と統一する
- ブロック名とエレメント名のみ書けばOK
- ブロック名とエレメント名の後は_をいくつ挟んでもOK
「class="ブロック名_エレメント名"」 → 「ブロック名_エレメント名_画像名.gif」
「class="serchForm_btn"」 → 「serchform_btn_submit.gif」
「class="serchForm_btn"」 → 「serchform_btn_submit_off.gif」
- 画像名を書く必要のない場合は省略も可
「class="ブロック名_エレメント名"」 → 「ブロック名_エレメント名.gif」
「class="serchForm_btn"」 → 「serchform_btn.gif」