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

フロントエンジニアならBEMが使われたHTMLを書いたことがある人も多いと思いますが、BEMのBlockってどの単位で切り分ける基準を迷いませんか？

HTMLを設計するという考えが生まれてからBEMは色んなサイトや多く人で使われるようになりました。

ですがBEMはHTMLでBlockを作るための考え方の1つです。
どの単位でBEMのBlockにするかはチームや人によっても変わってきます。

Blockを分ける判断に正解はありませんが、メンテナンス性を損なわないために気をつけていることがあります。
どんな状況でも使えると思うので紹介します。

Blockは大きくなりすぎないように意識する

BEMを採用する目的は

• 可読性を上げる
• メンテナンス性を考慮したコードにする
• CSSのスコープをBEMのブロックで再現する

など色々あると思います。
その中で特にメンテナンス性を考慮したコードにするためには、BEMのブロックは大きくなりすぎないようにしておく必要があります。

Blockを小さくするよりも大きくなりすぎないように意識を持っているだけで、BEMを採用する意味があります。

ではどのような基準でBEMのBlockを適切な大きさに保っていくか。

BEMでCSS設計する人のためのわかりやすいコーディングサンプル

Element名にキャメルケースが適用されたら注意

BEMで大きすぎないBlockを作るコツはElement名にキャメルケースを使いたくなったら、Blockを切るタイミングの可能性があります。

キャメルケースは「itemName」のような単語を繋げるときに、2つめ以降の単語の先頭を大文字にする規則です。
単語を2つ繋げているということは、それだけ1つの機能としての役割を持ちBlockにできるかもしれません。

例えば下記のようなコードはBlockを2つに分けることがおすすめです。

<div class="userList">
  <div class="userList__item">
    <div class="userList__itemName">User Name</div>
    <div class="userList__itemSummary">user summary...</div>
  </div>
　<div class="userList__item">
    <div class="userList__itemName">User Name</div>
    <div class="userList__itemSummary">user summary...</div>
  </div>
</div>

userListというブロックでBEMの命名規則でElementを複数作っています。
自然なように見えますがこの例は先に紹介したキャメルケースを使ってElementを作っています。

<div class="userList__item">
	<div class="userList__itemName">User Name</div>
  <div class="userList__itemSummary">user summary...</div>
</div>

この部分はたしかにuserListの一部ですが、itemNameやitemSummaryはitemというBlockのElementに属しているようにも見えます。
Itemの部分をuserというBlockに置き換えると下記のようになります。

<div class="user">
  <div class="user__name">User Name</div>
  <div class="user__summary">user summary...</div>
</div>

新たにブロックを作ることでElement名にキャメルケースを使わなくてよくなりました。
置き換えたコードはこんな感じになります。

<div class="userList">
  <div class="userList__item">
    <div class="user">
      <div class="user__name">User Name</div>
      <div class="user__summary">user summary...</div>
    </div>
  </div>
  <div class="userList__item">
    <div class="user">
      <div class="user__name">User Name</div>
      <div class="user__summary">user summary...</div>
    </div>
  </div>
</div>

キャメルケースでBlockを分けなくても良い場合

キャメルケースのElement名はBlockを分けるタイミングというのは先に書いた通りですが、時として厳密に分けなくても良いと思う場合もあります。

それはキャメルケースのElementが大きくならないことを想定したものです。
例えば下記のような例です。

<div class="post">
  <header class="post__header">
    <h1 class="post__title"></h1>
    <div class="post__meta">
      <ul class="post__metaList">
        <li class="post__metaItem">カテゴリ</li>
        <li class="post__metaItem">公開日</li>
      </ul>
    </div>
  </header>
  <div class="post__body">
    Dolor sapiente impedit animi tempore placeat Facilis ipsa nobis mollitia quisquam labore eos Velit assumenda ducimus blanditiis incidunt unde provident. Quis illo est temporibus deleniti corporis porro laboriosam et Recusandae?
  </div>
</div>

このコードにもmetaListのようなキャメルケースを使ったElementが出てきています。
これまで書いた基準でいくと

<ul class="postMeta__list">
  <li class="postMeta__item">カテゴリ</li>
  <li class="postMeta__item">公開日</li>
</ul>

のようにBlockを作ることになります。
もちろん分けてしまっても問題はありません。

ですがHTMLには大きくなる可能性があるものとそうでないものがあります。

デザインにもよりますが、metaListのようにメタ情報を並べるだけのBlockはあまり大きくなるようなイメージがありません。
そのようなHTMLはBlockに分けず、Elementのままにしておいてもメンテナンス性を損なう可能性が低くなります。

逆に細かく分けすぎてメンテナンス性を損なう可能性もあります。
Blockが大きくならないようなものはElementのままにしてくおくのも1つの判断です。

BEMを使う意味を考えてメンテナンス性の高いコードを書く

BEMは命名規則の1つの手段であって、BEMを使えばメンテナンス性の高いコードになるというわけではありません。

これまで紹介したようにBlockを適切な大きさに保つことが大切です。

どの単位でBlockにするかはBEMを使う上で難しいポイントの1つです。
Element名がキャメルケースの場合Blockにわけることを考える、というような基準を設けておくことでBlockが大きくなりすぎるのを防ぐことができます。

BEMを使うことに満足するのではなく、今回紹介した内容がBEMを使ってメンテナンス性の高いコードを書く手助けになると嬉しいです。