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

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

# BEMとは

- [MindBEMding – getting your head ’round BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
- [MindBEMding(翻訳版)](https://gist.github.com/juno/6182957)
- [BEMとは何か？](https://github.com/juno/bem-methodology-ja/blob/master/definitions.md)
- [BEMによるフロントエンドの設計](https://app.codegrid.net/entry/bem-basic-1)

# Element地獄
BEMの一番の悩み所はElementの扱い。`block__element__element`のような
ElementにElementを繋げると以下のようにとんでもないことになる。

```html: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の粒度を細かくする

```html: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

```html: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__list`Elementが`.box`Blockに依存。`.list`Blockは`.box`Blockには依存していない。
- `.list__item`Elementが`.list`Blockに依存。`.box__list`Elementには依存していない。
- `.box__article`Elementが`.box`Blockに依存。`.article`Blockは`.box`Blockには依存していない。
- `.article__list`Elementが`.article`Blockに依存。`.list`Blockは`article`Blockには依存していない。


ということになる。依存関係がわかる。

## BlockがBlockに依存している場合、チェインケースで繋いで命名する。
依存しているBlockをチェインケースで繋いで命名する。

```html: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-list`Blockが`.box`Blockに依存。
- `.box-article`Blockが`.box`Blockに依存。
- `.box-article-list`Blockが`.box-article`Blockに依存。`.box`Blockには依存していない。

ということになる。依存関係がわかる。
キャメルケースやスネークケースでも良いと思う。
BEMじゃなくない？という感じはする。

## Element同士はチェインケースで繋いで命名する。
`block__element__element`ではなく、`block__element-element`のようにチェインケースで繋いで命名する。

```html: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い話](http://qiita.com/hiloki@github/items/4fa99b8755a22878449e)
- [BEMおじさんは考えた vol.1](http://geckotang.github.io/presentation-think-of-bem-1/#/)