BEMを実際に使ってみて

背景

BEMで開発すること半年たったので

BEMとは

• Block（Webサイトを構成するパーツ）
• Element（Blockを構成する要素）
• Modifire（BlockやElementの見た目を変える要素）

命名規則はMindBEMdingがベース

BEM記法

block
block__element
block__element--modifier
block--modifier
block--modifier__element

メリット/デメリットをさらっと書いてみます。

メリット
ソースコードの統一性を保つ
スタイルの汚染を防ぐ
HTML構造が明確になる
再利用・拡張性に優れる

デメリット
開発スピードが遅くなる
支持を得にくい

メリットを享受できるかどうかは、BEMをちゃんと理解しなきゃいけない

破綻寸前になる前に

ちゃんと「コーディングルール」や「スタイルガイド」といったドキュメントを揃えておく

BEMで躓いたところ

サムネイルとテキストがあるリストボックスです。
特にmodifierですね。。。

HTML

<div class="box">
  <div class="box__thumb">
    <img src="" alt="" class="box__thumb-image">
  </div>
  <div class="box__body">
    <div class="box__heading">Blockの見出し</div>
    <p class="box__text">テキストテキストテキストテキスト...</p>
  </div>
</div>

これを外側と画像部分を角丸にしたいとしたらどうなるか？

HTML

/* bad */
<div class="box box--soft">
  <div class="box__thumb">
    <img src="" alt="" class="box__thumb-image box__thumb-image--soft">
  </div>
  <div class="box__body">
    <div class="box__heading">Blockの見出し</div>
    <p class="box__text">テキストテキストテキストテキスト...</p>
  </div>
</div>

<style>
.box--soft { border-radius: 3px; }
.box__thumb-image--soft { border-radius: 3px; }
</style>

コンポーネントのベースにmodifierを追加し、その1つのmodifierに基づいて各子要素のスタイルを調整する

HTML

/* good */
<div class="box box--soft">
  <div class="box__thumb">
    <img src="" alt="" class="box__thumb-image">
  </div>
  <div class="box__body">
    <div class="box__heading">Blockの見出し</div>
    <p class="box__text">テキストテキストテキストテキスト...</p>
  </div>
</div>

<style>
.box--soft { border-radius: 3px; }
.box__thumb-image--soft .box__thumb-image { border-radius: 3px; }
</style>

まだBEM歴が半年なので躓いたら追記していきます