📂 BEM(Block Element Modifier) 방식의 네이밍 전략

📂 BEM(Block Element Modifier) 방식의 네이밍 전략

BEM은 Block Element Modifier의 약자로, CSS 클래스명을 체계적이고 재사용 가능하게 만드는 명명 규칙(Naming Convention)입니다. 유지보수성과 가독성이 매우 뛰어나기 때문에 대규모 프로젝트에서도 많이 사용됩니다.

---

1️⃣ BEM 구조 기본 문법

.block              → 독립적인 블록 (예: card, button)
.block__element     → 블록 내부의 구성 요소 (예: card__title)
.block--modifier    → 상태나 변형을 나타냄 (예: card--highlighted)

예:

  
제목
  
내용

👉 클래스명만 보고 구조와 용도를 쉽게 이해할 수 있습니다.

---

2️⃣ 구성 요소 설명

• Block: 독립적으로 의미 있는 UI 단위
• Element: Block 안의 하위 구성 요소 (의존적)
• Modifier: 스타일 변화 또는 상태 값

.button          // 블록
.button__icon    // 요소
.button--large   // 수정자

---

3️⃣ 예제 – 버튼 컴포넌트

HTML:

CSS:

.button {
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
}

.button--primary {
  background-color: #007bff;
  color: white;
}

.button__icon {
  margin-right: 8px;
}

---

4️⃣ BEM의 장점

• 의미 있는 클래스 네이밍 → 협업 시 의사소통 원활
• 중첩되지 않음 → CSS 충돌 방지
• 컴포넌트 단위로 재사용성과 확장성 향상

---

5️⃣ 사용 시 주의할 점

• 클래스명이 길어질 수 있으므로 일관성 있는 명명 전략 필요
• JS 또는 HTML 구조 변경 시 클래스명도 같이 관리되어야 함

---

6️⃣ BEM + SCSS 작성 예

.button {
  &__icon {
    margin-right: 8px;
  }

  &--primary {
    background-color: #007bff;
    color: white;
  }
}

👉 SCSS에서는 중첩을 통해 더욱 읽기 좋은 구조로 유지할 수 있습니다.

---

📌 정리 요약

• .block → 독립 단위
• .block__element → 구성 요소
• .block--modifier → 상태 및 변형
• CSS 클래스 관리의 체계화를 위해 BEM은 매우 추천되는 방식

---

📌 다음 글 예고

다음 글: CSS 변수(--var)의 사용법과 테마 시스템 구축에서는 전역 스타일 관리 및 다크모드 전환을 위한 CSS 변수 활용법을 소개합니다.