BEMを用いたCSS設計を考える

block__element__elementのような命名を防ぎたい。
また、命名に悩んで時間を費やしてしまうことがあるため
BEMを用いたCSS設計に関して色々考えた備忘録です。
より良い考え方があれば、ご教示くださると幸いです。

BEMとは

• MindBEMding – getting your head ’round BEM syntax
• MindBEMding(翻訳版)
• BEMとは何か？
• 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を組み合わせた命名規則を用いる人もいるが、その方が良いかもしれない。(状況によりけり)
• 丁度良い感じの粒度を考えるのが難しい。。。

参考

• 少し細かいBEMい話
• BEMおじさんは考えた vol.1