🚀 BEM 실전 가이드: SCSS 활용법부터 놓치기 쉬운 3가지 주의점까지

BEM(Block, Element, Modifier)은 CSS를 모듈화하고 관리하는 가장 효과적인 방법론 중 하나입니다. 하지만 BEM을 프로젝트에 성공적으로 안착시키기 위해서는 몇 가지 실전 팁과 SCSS 활용 전략을 숙지해야 합니다.이 글에서는 BEM을 효율적으로 사용하는 방법과, 개발자들이 흔히 저지르는 실수 3가지를 알려드립니다.

---

1. 💻 SCSS에서 BEM을 활용하는 법: 간결한 네스팅 전략

SCSS는 CSS의 기능을 확장한 전처리기입니다. SCSS의 네스팅(Nesting)과 앰퍼샌드(&)를 활용하면 BEM의 긴 클래스명을 훨씬 간결하게 작성하면서도 BEM 규칙을 완벽하게 준수할 수 있습니다.

SCSS를 이용한 BEM 명명

SCSS에서 앰퍼샌드(&)는 부모 선택자를 참조하며, 이를 이용하여 BEM의 구분자(__, --)를 연결합니다.

BEM 구성 요소	SCSS 표현 방법	컴파일 결과 (예시)
Block	.card { ... }	.card
Element	&__title { ... }	.card__title
Modifier	&--dark { ... }	.card--dark

작성 예시

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;

  // Element: button__icon
  &__icon {
    margin-right: 5px;
  }

  // Modifier: button--primary
  &--primary {
    background-color: #28a745;
  }
}

✨ 장점: 코딩 시 클래스명 반복을 줄여 생산성이 향상되며, 컴파일된 CSS는 BEM 규칙을 완벽히 따르므로 유지보수성이 높습니다.

---

2. 🛑 BEM 적용 시 반드시 피해야 할 3가지 주의점

BEM의 핵심 원칙을 벗어나면 오히려 CSS가 복잡해지거나 의도치 않은 충돌이 발생할 수 있습니다. 다음 세 가지 실수를 피하는 것이 중요합니다.

⚠️ 주의점 1: Element의 중첩을 피하고 깊이는 1단계로 유지하라

BEM은 평탄한 구조(Flat Structure)를 지향합니다. Element는 항상 Block의 직속 자식처럼 명명되어야 하며, block__element__subelement와 같은 깊은 중첩은 피해야 합니다.

SCSS 사용 시 주의: SCSS 네스팅을 사용할 때도, &__item 안에 다시 &__link를 네스팅하지 말고, .menu__item과 .menu__link를 .menu 블록 하위에 나란히 작성해야 합니다.

⚠️ 주의점 2: Modifier는 원본 클래스에 반드시 추가하여 사용하라

Modifier는 상태 변경만을 위한 플래그이므로, 항상 원본 클래스(Block 또는 Element)와 함께 사용해야 합니다.

<button class="button button--disabled">
</button>

CSS: Modifier 클래스만 단독으로 사용하여 기본 스타일이 깨지는 것을 방지합니다.

⚠️ 주의점 3: CSS 선택자(Selector)의 복잡도를 높이지 마라

BEM은 낮은 명시도를 유지하여 스타일 재정의(Override)를 쉽게 만드는 것을 목표로 합니다. 따라서 태그 선택자나 > 같은 복잡한 결합자를 BEM 클래스와 함께 사용하는 것은 지양해야 합니다.

SCSS 사용 시 주의:

// ❌ 지양: 복잡한 선택자로 컴파일됨
.card {
  a { /* ... */ } 
}

// ✅ 권장: 단일 BEM 클래스로 명확하게 지정
.card {
  &__link { /* ... */ } 
}

🔑 핵심: BEM 클래스(.block-name) 하나만으로 스타일을 지정하여 CSS의 명시도를 낮게 유지하는 것이 BEM의 이점을 극대화하는 길입니다.

---

5. 결론

BEM 방법론은 SCSS를 만났을 때 개발 생산성이 극대화됩니다. 앰퍼샌드와 네스팅을 활용하여 코딩은 빠르게 하되, 평탄한 구조 유지, Modifier의 올바른 사용, 단일 클래스 선택자 사용이라는 BEM의 세 가지 핵심 원칙을 지킨다면, 어떤 대규모 프로젝트에서도 견고하고 유지보수가 쉬운 CSS 구조를 확보할 수 있습니다.