BEM 방법론: 블록, 요소, 수정자

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