css__BEM

지훈김·2024년 9월 19일

BEM(Block, Element, Modifier)은 CSS 클래스 명명 규칙으로, 코드를 읽기 쉽게 하고, 재사용성과 유지보수를 쉽게 하기 위해 고안되었습니다. BEM은 웹 개발 시 CSS 구조를 체계적으로 관리하고, 명확한 규칙을 적용할 수 있는 방법론입니다.

BEM의 세 가지 주요 개념인 Block, Element, Modifier에 대해 자세히 설명드릴게요.

1. Block (블록)

독립적인 구성 요소로, 페이지나 UI에서 하나의 독립적인 개체를 의미합니다.
블록은 다른 블록에 의존하지 않으며, UI에서 의미 있는 개별적인 요소입니다.

예시: header, menu, button, card 등.

예시:

<div class="menu">...</div>

2. Element (엘리먼트)

블록의 구성 요소로, 블록 안에 있는 특정 부분을 의미합니다. 블록에 의존하여 존재하는 요소로, 블록의 일부일 뿐입니다.
엘리먼트는 블록에 종속되며, 블록과 연관된 하위 요소를 정의할 때 사용됩니다.

예시: menu__item, menu__link, button__icon 등.

예시:

<div class="menu">
  <ul class="menu__list">
    <li class="menu__item">Home</li>
    <li class="menu__item">About</li>
  </ul>
</div>

menu__list, menu__item은 블록 menu의 하위 요소입니다.

3. Modifier (모디파이어)

블록이나 엘리먼트의 변형 또는 상태를 나타냅니다. 모디파이어는 블록이나 엘리먼트의 스타일을 다르게 적용할 때 사용됩니다.
모디파이어는 크기, 색상, 상태, 동작과 같은 특성을 정의합니다.

예시: button--large, menu__item--active 등.

예시:

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

menu__item--active는 menu__item의 모디파이어로, 활성화된 메뉴 아이템을 나타냅니다.

BEM 네이밍 규칙

BEM에서는 클래스 이름을 세 가지 주요 형식에 맞게 작성합니다:
1. 블록 이름: 독립적인 UI 구성 요소 (예: menu).
2. 엘리먼트 이름: 블록 안의 구성 요소를 나타내며, 블록 이름 뒤에 두 개의 밑줄(__)을 사용하여 구분 (예: menu__item).
3. 모디파이어 이름: 블록이나 엘리먼트의 변형이나 상태를 나타내며, 이름 뒤에 두 개의 대시(--)를 사용하여 구분 (예: menu__item--active).

BEM의 명명법 구조

블록: .block
엘리먼트: .block__element
모디파이어: .block--modifier 또는 .block__element--modifier

BEM의 장점

가독성: 클래스 이름만 보고도 그 요소가 어디에 속하는지, 어떤 상태인지 쉽게 파악할 수 있습니다.
재사용성: 블록과 엘리먼트는 독립적이므로 다른 페이지나 프로젝트에서도 쉽게 재사용할 수 있습니다.
유지보수성: 명확한 규칙을 가지고 있어 프로젝트가 커져도 구조를 유지하기 쉽습니다.
명확한 관계: 블록과 엘리먼트의 관계가 명확하게 정의되어 코드의 의도를 쉽게 이해할 수 있습니다.

BEM 적용 예시

<!-- HTML 구조 -->
<div class="card card--highlight">
  <h2 class="card__title">Card Title</h2>
  <p class="card__description">Card description text</p>
  <a href="#" class="card__link">Read more</a>
</div>

/* CSS 스타일 */
.card {
  background-color: #fff;
  padding: 20px;
}

.card--highlight {
  background-color: #f0f0f0;
}

.card__title {
  font-size: 24px;
}

.card__description {
  font-size: 16px;
}

.card__link {
  color: blue;
}