[HTML & CSS]BEM(Block Element Modifier) – CSS 클래스 네이밍 방법론

by



개요

  • 웹 개발을 하다 보면 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 같은 컴포넌트 기반 프레임워크와 함께 사용하면 더욱 유용합니다.


Leave a Comment