CSS를 작성하다 보면 스타일 충돌, 유지보수 어려움, 네이밍 고민 등의 문제를 자주 겪게 돼요. 특히 프로젝트가 커질수록 이러한 문제들은 더욱 심각해지는데요. 이를 해결하기 위해 등장한 방법론 중 하나가 바로 BEM(Block, Element, Modifier)이에요.

BEM은 클래스 네이밍 규칙을 체계적으로 정리해 CSS의 가독성과 재사용성을 높이는 방법론이에요. 이 글에서는 BEM의 개념과 활용 방법을 소개할게요.

BEM 방법론의 기본 개념

BEM 방법론은 Block(블록), Element(요소), Modifier(수정자)라는 세 가지 개념으로 구성돼 있어요.

BEM 의미

Block(블록)

독립적인 기능을 수행하는 단위예요.
재사용이 가능하며 개별적으로 존재할 수 있어요.
예시: .button, .card, .form

예시

.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
}

Element(요소)

블록 내부에 포함되는 구성 요소예요.
블록이 없으면 단독으로는 존재할 수 없어요.
예시: .button__icon, .form__input

예시

.button__icon {
  margin-right: 8px;
}

Modifier(수정자)

블록이나 요소의 상태를 정의해요.
모양, 크기, 생상 등의 변화를 줄 때 사용해요.
예시: .button—-primary, .button—-disabled, .form__input—-active

예시

.button--primary {
  background-color: blue;
}

.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

BEM 명명 규칙

기호	의미
`__`	하위 요소를 의미
`—-`	상태 변형을 의미

💡

하나의 이름에 요소, 변형은 각 한 번만 허용해요.

아래 형식 이외에 다른 형식은 허용하지 않아요.

.block {...}
.block__element {...}
.block__element--modifier {...}
.block--modifier {...}

그리고 변형 클래스는 단독 사용이 불가하며, 항상 블록 또는 요소와 함께 사용하여야 해요.

// 잘못된 사용
<button class="button--submit" />

// 올바른 사용
<button class="button button--submit" />

실사용 예시

BEM Card

만약 위와 같은 카드 UI를 개발해야 한다면, 아래와 같이 클래스 네이밍을 작성할 수 있어요.

<div class=“card”>
  <img class=“card__image”>
  <h2 class=“card__title”>Card Title</h2>
  <p class=“card__description”>Card Description</p>
  <a class=“card__button”>Learn more</a>
</div>

BEM 안티 패턴

비효율적이거나 비생산적인 BEM 안티 패턴(anti-pattern)에 대해 소개할게요.

잘못된 사용

아래와 같이 작성 시 ‘선택자 특이성’이 높아지는 중첩 구조가 되며, 타입 선택자는 BEM 방법론에서 안티 패턴으로 간주하고 있어요. 그러므로 타입 선택자는 가급적 피하는 것이 좋아요.

.photo {...}              // 특이성 10
.photo img {...}          // 특이성 11
.photo figcaption {...}   // 특이성 11

아래의 예시처럼 블록/요소 이름 생략, 요소/변형 이름 중복을 금지하고 있어요.

.__elem {...}
.--modi {...}
.block__elem1__elem2 {...}
.block--modi1--modi2 {...}

올바른 사용

아래와 같이 작성 시 제어하려는 모든 요소에 클래스 이름을 부여하여 특이성을 관리할 수 있어요.

.photo {...}              // 특이성 10
.photo__img {...}         // 특이성 10
.photo__figcaption {...}  // 특이성 10

BEM 방법론의 장점은?

1. ✨ 명확한 네이밍 규칙

클래스명이 구조적으로 정리돼 있어서 코드 가독성이 좋아져요.

2. 💥 스타일 충돌방지

각 요소의 명확한 네이밍을 가지므로 스타일이 의도치 않게 덮어씌워지는 문제를 줄일 수 있어요.

3. ♻️ 재사용성과 확장성 증가

블록 단위로 스타일을 정의하므로 컴포넌트를 재사용하기 쉬워져요.

4. 🫂 협업이 쉬워짐

네이밍 규칙이 통일돼 있기 때문에 여러 명이 함께 작업할 때도 유지보수가 편해져요.

마무리

BEM 방법론을 사용하면 CSS 코드를 보다 체계적으로 관리할 수 있어요. 네이밍 규칙이 명확해서 협업과 유지보수도 훨씬 쉬워지고요. 처음에는 언더스코어(__)와 대시(--)가 다소 생소하게 느껴질 수 있지만, 익숙해지면 구조적인 CSS 작성이 가능해질 거예요.

앞으로 CSS 설계를 할 때 BEM을 적용해보는 건 어떨까요? 😊

Bem 방법론

Table of contents