BEM 方法論：Block・Element・Modifier

BEMとは

ブロック — 独立したコンポーネント

<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>

エレメント — ブロックの一部

<div class="card">
  <img class="card__image" src="..." alt="...">
  <div class="card__body">
    <h2 class="card__title">Title</h2>
    <p class="card__description">...</p>
  </div>
  <footer class="card__footer">
    <a class="card__link" href="...">Read more</a>
  </footer>
</div>

モディファイア — バリエーションと状態

<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>

<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>

BEMのCSSルール

/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }

/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }

Sassで使うBEM

.card {
  padding: 16px;

  &__title {
    font-size: 1.25rem;
    font-weight: 600;
  }

  &__body {
    color: var(--color-text-secondary);
  }

  &--featured {
    border: 2px solid var(--color-brand);
  }
}

新しいブロックを作成するタイミング

BEMでは入れ子を避ける

<!-- Correct: -->
<div class="card">
  <div class="card__meta">
    <time class="card__date">Jan 1</time>
  </div>
</div>

<!-- Wrong: -->
<div class="card">
  <div class="card__meta">
    <time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
  </div>
</div>

BEMとJavaScript

<button class="btn btn--primary js-submit">Submit</button>

// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);

BEMブロックの混在

<button class="btn btn--primary form__submit">Submit</button>

BEMの制限

クイックチェック

まとめ: BEM