コード設計2018.07.09

BEMのBlockはElementを入れ子にせずにコンポーネント化しよう

BEMでコーディングしていると、Elementが入れ子になってしまうことがありませんか？

設計になれないとどのような単位でBlockにしてコンポーネント化するのか迷ってしまうかと思います。

そこでBEMのBlockはどのようｂな単位で作ればいいのか基準を紹介します。

BEMがよくわからない人は最初に「BEMでCSS設計する人のためのわかりやすいコーディングサンプル」を読んでみてください。

目次

BEMでElementが入れ子になる
Blockを入れ子にしていく
BEMのBlockは細かくを心がける

BEMでElementが入れ子になる

BEMで設計した時にどの単位でコンポーネント化するかは、クラス名に階層かできそうな場合に分けるのがよいと思います。

下記のコードはクラス名に階層がある場合です。

1
2
3
4
5
6
7
8
9
10
11
<div class="productList">
  <div class="productList__title">商品一覧</div>
  <div class="productList__list">
    <div class="productList__item">
      <div class="productList__box">
        <div class="productList__boxName">商品名</div>
        <div class="productList__boxPrice">価格</div>
      </div>
    </div>
  </div>
</div>

.productListというBlockの中にはElementだけを作っています。
もちろんこれでも間違いではありませんが、BEMはElementの中にBlockを作っても問題ありません。

このままではHTMLが増えるとBlockの単位が大きくなってしまうので、新たにBlockを作るのがおすすめです。

例えば.productList__boxの中には更に.productList__boxNameというElementが存在し、クラス名の中で階層ができています。

こういうクラス名が出てきたときにはBlockを新たに作るチャンスです。
BEMでどのような単位でBlockにすれば良いかというのは別で記事に書いているので合わせて参考にしてください。

BEMのBlockの単位はどうする？どんなサイトにも使える判断基準

Blockを入れ子にしていく

先に書いたようにBEMでBlockを入れ子にするのは問題ありません。
例えば先程のコードで新たにBlockを作ってみました。

よくあるようなサイト全体的なコードだとこんな感じになると思います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="header">
  <a href="#" class="header__brand">Brand Logo</a>
</div>
<div class="content">
  <div class="content__main">
    <div class="productList">
      <div class="productList__title">商品一覧</div>
      <div class="productList__list">
        <div class="productList__item">
          <div class="productItem">
            <div class="productItem__pame">商品名</div>
            <div class="productItem__price">価格</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="content__side">
    <div class="widget">
      <div class="widget__title">検索</div>
      <div class="widget__body">
        <div class="searchForm">
          <input type="text" class="searchForm__input">
          <button class="searchForm__button">検索</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="footer">
  <div class="footer__copy">copyright</div>
</div>

productItemというBlockを新たに作ることによって、先に紹介したproductListのBlockのElementを減らすことができました。

見てわかる通りBlockとElementが順番で入れ子になっています

BEMのBlockは細かくを心がける

BEMはElementにElementを入れ子にするとキリが無くなるほど、どんどん大きくなってしまいます。

また運用を続けるとクラス名は入れ子になっているのにHTMLの構造は入れ子になっていない、なんて状況にもなりかねません。

今回紹介したようなクラス名に階層ができてしまう場合は新しくBlockを定義することを、心がけるとBEMでのメンテナンス性はぐっとあがります。