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」

参考