block__element__elementのような命名を防ぎたい。
また、命名に悩んで時間を費やしてしまうことがあるため
BEMを用いたCSS設計に関して色々考えた備忘録です。
より良い考え方があれば、ご教示くださると幸いです。
BEMとは
Element地獄
BEMの一番の悩み所はElementの扱い。block__element__elementのような
ElementにElementを繋げると以下のようにとんでもないことになる。
BEM
<div class="box">
<div class="box__title"></div>
<ul class="box__list">
<li class="box__list__item"></li>
<li class="box__list__item"></li>
<li class="box__list__item"></li>
</ul>
<div class="box__article">
<div class="box__article__title"></div>
<ul class="box__article__list">
<li class="box__article__list__item"></li>
<li class="box__article__list__item"></li>
<li class="box__article__list__item"></li>
</ul>
</div>
</div>
無限に続くElement地獄。これは避けたい。
Element地獄回避方法
Blockの粒度を細かくする
BEM
<div class="box">
<div class="box__title"></div>
<ul class="list">
<li class="list__item"></li>
<li class="list__item"></li>
<li class="list__item"></li>
</ul>
<div class="article">
<div class="article__title"></div>
<ul class="list">
<li class="list__item"></li>
<li class="list__item"></li>
<li class="list__item"></li>
</ul>
</div>
</div>
スッキリ。
それぞれの要素に依存関係がある場合、それがわからない。
Blockの粒度を細かくする その2
BEM
<div class="box">
<div class="box__title"></div>
<ul class="box__list list">
<li class="list__item"></li>
<li class="list__item"></li>
<li class="list__item"></li>
</ul>
<div class="box__article article">
<div class="article__title"></div>
<ul class="article__list list">
<li class="list__item"></li>
<li class="list__item"></li>
<li class="list__item"></li>
</ul>
</div>
</div>
上記の例だと
-
.box__listElementが.boxBlockに依存。.listBlockは.boxBlockには依存していない。 -
.list__itemElementが.listBlockに依存。.box__listElementには依存していない。 -
.box__articleElementが.boxBlockに依存。.articleBlockは.boxBlockには依存していない。 -
.article__listElementが.articleBlockに依存。.listBlockはarticleBlockには依存していない。
ということになる。依存関係がわかる。
BlockがBlockに依存している場合、チェインケースで繋いで命名する。
依存しているBlockをチェインケースで繋いで命名する。
BEM
<div class="box">
<div class="box__title"></div>
<ul class="box-list">
<li class="box-list__item"></li>
<li class="box-list__item"></li>
<li class="box-list__item"></li>
</ul>
<div class="box-article">
<div class="box-article__title"></div>
<ul class="box-article-list">
<li class="box-article-list__item"></li>
<li class="box-article-list__item"></li>
<li class="box-article-list__item"></li>
</ul>
</div>
</div>
上記の例だと
-
.box-listBlockが.boxBlockに依存。 -
.box-articleBlockが.boxBlockに依存。 -
.box-article-listBlockが.box-articleBlockに依存。.boxBlockには依存していない。
ということになる。依存関係がわかる。
キャメルケースやスネークケースでも良いと思う。
BEMじゃなくない？という感じはする。
Element同士はチェインケースで繋いで命名する。
block__element__elementではなく、block__element-elementのようにチェインケースで繋いで命名する。
BEM
<div class="box">
<div class="box__title"></div>
<ul class="box__list">
<li class="box__list-item"></li>
<li class="box__list-item"></li>
<li class="box__list-item"></li>
</ul>
<div class="box__article">
<div class="box__article-title"></div>
<ul class="box__article-list">
<li class="box__article-list-item"></li>
<li class="box__article-list-item"></li>
<li class="box__article-list-item"></li>
</ul>
</div>
</div>
これもキャメルケースやスネークケースでも良いと思う。
__よりは冗長ではない。
BEMじゃなくない？という感じはする。
BEMじゃなくない？
もはやBEMっぽい命名規則になっている気がする。
終わり
- **「おめえのBEMはBEMじゃねえ!」**と言われそう。
- BEMを採用したとしても、上記の例のように様々な命名をする人がいるかもしれないため、命名規則の明確なルール決めが必要。
- BEMにOOCSSやSMACSSを組み合わせた命名規則を用いる人もいるが、その方が良いかもしれない。(状況によりけり)
- 丁度良い感じの粒度を考えるのが難しい。。。