개요

• 웹 개발을 하다 보면 CSS의 클래스 네이밍이 점점 복잡해지고, 유지보수가 어려워지는 경우가 많습니다.
• 이러한 문제를 해결하기 위해 등장한 방법론이 바로 BEM(Block Element Modifier) 입니다.
• BEM을 활용하면 클래스 이름을 체계적으로 관리할 수 있고, 스타일 충돌을 방지하며, 코드의 재사용성을 높일 수 있습니다.
• 이번 글에서는 BEM의 개념과 사용법을 쉽게 설명해 보겠습니다. 🚀

🔹 BEM이란?

• BEM은 Block(블록), Element(요소), Modifier(수정자) 의 약자로, CSS 클래스 네이밍 규칙을 체계적으로 정의하는 방법론입니다.

1️⃣ Block (블록)

• 독립적으로 존재할 수 있는 UI 요소
• 예: header, menu, button, card
• 클래스명 예시: .menu, .button, .card

2️⃣ Element (요소)

• 블록 내부에서만 존재하는 구성 요소
• 예: menu 내부의 item, button 내부의 icon
• 클래스명 예시: .menu__item, .button__icon

3️⃣ Modifier (수정자)

• 블록이나 요소의 상태나 스타일 변화를 나타냄
• 예: 비활성화된 버튼, 강조된 메뉴 항목
• 클래스명 예시: .button--disabled, .menu__item--active

🔹 BEM 클래스 네이밍 규칙

• BEM에서 사용하는 네이밍 패턴은 아래와 같습니다.

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

• BEM을 적용하면 CSS의 가독성과 유지보수성이 크게 향상됩니다.

📌 BEM 적용 예제

• BEM 네이밍 규칙을 실제 코드에서 어떻게 사용하는지 살펴보겠습니다.

✅ HTML 코드

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__item menu__item--active">Home</li>
    <li class="menu__item">About</li>
    <li class="menu__item">Contact</li>
  </ul>
</nav>

✅ CSS 코드

.menu {
  background: #333;
  padding: 10px;
}

.menu__list {
  list-style: none;
  display: flex;
}

.menu__item {
  color: white;
  padding: 10px;
}

.menu__item--active {
  font-weight: bold;
  text-decoration: underline;
}

• 위와 같이 BEM을 적용하면 클래스 간의 충돌을 방지하고, 코드의 가독성을 높일 수 있습니다.

🎯 BEM을 사용해야 하는 이유

✅ 클래스 이름 충돌 방지

전역적으로 사용되는 스타일 클래스와 충돌할 위험이 줄어듭니다.

✅ 유지보수와 확장성 향상

클래스 구조가 명확해지므로 스타일 변경 및 추가가 쉬워집니다.

✅ 재사용성 증가

블록, 요소, 수정자를 조합하여 다양한 스타일을 손쉽게 재사용할 수 있습니다.

🛠️ BEM을 더 효과적으로 활용하는 팁

1. 일관된 네이밍 규칙 유지
   • 프로젝트 내에서 동일한 BEM 네이밍 규칙을 사용하세요.
2. 필요 없는 요소/수정자 사용 자제
   • 불필요한 __element나 -modifier를 남발하지 마세요.
3. 컴포넌트 기반 개발과 함께 사용
   • React, Vue 같은 컴포넌트 기반 프레임워크와 함께 사용하면 더욱 유용합니다.