[CSS] BEM 방법론에 대해 알아보자(Block, Element, Modifier)

BEM (Block, Element, Modifier)은 CSS 클래스를 명명하는 방법론 중 하나로, HTML과 CSS의 구조를 더 이해하기 쉽고 유지보수하기 쉽게 만들어주는 효과가 있습니다.

BEM의 이름은 아래 세 가지 컴포넌트에 따라 붙여집니다.

1. Block (블록)
2. Element (요소)
3. Modifier (수정자)

1. Block (블록)

블록은 독립적인 엔티티로, 재사용이 가능합니다.

예를 들면, 헤더, 컨테이너, 메뉴, 체크박스 등이 이에 해당합니다.

2. Element (요소)

요소는 블록 내부의 구성 요소로, 블록이 없으면 의미를 가지지 못합니다.

예를 들면, 메뉴 항목, 리스트 항목, 헤더 타이틀 등이 이에 해당합니다.

3. Modifier (수정자)

수정자는 블록이나 요소의 상태와 행동을 정의합니다. 예를 들면, 비활성화 상태, 체크 상태, 다른 테마 등이 있습니다.

BEM 네이밍 규칙은 아래와 같습니다.

• 블록과 요소는 __ (두 개의 언더스코어)로 연결합니다. 예: block__element
• 블록 또는 요소와 수정자는 - (두 개의 하이픈)으로 연결합니다. 예: block--modifier, block__element--modifier

예시

HTML과 CSS 예시를 통해 BEM을 이해해보겠습니다.

HTML:

<div class="menu">
  <button class="menu__item">Item 1</button>
  <button class="menu__item menu__item--disabled">Item 2</button>
</div>

CSS:

.menu { /* block */ }

.menu__item { /* element */ }

.menu__item--disabled { /* modifier */ }

위 예시에서, menu는 블록, menu__item은 요소, menu__item--disabled는 수정자입니다.

수정자 --disabled는 menu__item 요소의 상태를 변경합니다.

---

BEM (Block, Element, Modifier)에 대해 간단한 비유를 들어보겠습니다.

BEM을 자동차로 비유해보면 이해하기 더 쉬울 것입니다.

1. Block (블록): 이것은 자동차 자체를 의미합니다. 각 부품 없이는 자동차를 운행할 수 없으며, 그 자체로 완전한 기능을 가진 독립적인 단위입니다.
2. Element (요소): 이것은 자동차의 부품, 예를 들면 바퀴, 핸들, 브레이크 등을 의미합니다. 이들은 자동차(Block) 내에서 의미를 가집니다. 자동차 없이 바퀴나 핸들은 그 자체로 기능을 가지지 못합니다.
3. Modifier (수정자): 이것은 자동차의 특정 상태나 행동을 의미합니다. 예를 들어, "달리는 자동차", "파란색 자동차" 등과 같이 블록이나 요소의 상태나 행동을 변경합니다.

이를 적용해보면 다음과 같습니다:

<div class="car">
  <div class="car__wheel"></div>
  <div class="car__wheel"></div>
  <div class="car__wheel"></div>
  <div class="car__wheel"></div>
  <div class="car__handle"></div>
  <div class="car__brake"></div>
</div>

<div class="car car--running">
  <div class="car__wheel"></div>
  <div class="car__wheel"></div>
  <div class="car__wheel"></div>
  <div class="car__wheel"></div>
  <div class="car__handle"></div>
  <div class="car__brake"></div>
</div>

여기서 car는 블록, car__wheel, car__handle, car__brake는 요소, car--running은 수정자에 해당합니다. 이처럼 BEM 방법론은 웹 사이트의 다양한 요소들을 구조적으로 이해하고 관리하는 데 도움을 줍니다.

---

이처럼 BEM을 사용하면, 코드를 훨씬 더 쉽게 이해하고 유지보수할 수 있습니다.

BEM 방법론은 CSS 클래스의 이름을 일관성 있게 유지하고, 중복을 최소화하며, 스타일을 예측 가능하게 만드는 등의 이점이 있습니다.

또한, 대형 프로젝트에서 CSS의 복잡성을 관리하는데 효과적입니다.

하지만 BEM을 사용할 때는 클래스 이름이 길어질 수 있으므로 상황에 맞게 알맞은 방법을 찾아보아야 합니다.

---

Next.js에서 BEM 방법론 적용하려면?

Next.js를 이용하여 개발하는 사람들에게도 BEM 방법론이 도움이 될 수 있습니다.

Next.js는 React 기반의 프레임워크로, JSX에서는 CSS 클래스 이름에 하이픈(-)을 사용할 수 있지만, JavaScript의 객체 키에 하이픈을 사용하는 것은 문법 오류를 유발합니다.

따라서, CSS in JS 방식을 사용할 때 JavaScript 객체로 스타일을 정의하게 되며, 이때 'Block--Modifier' 형태의 BEM 명명법을 그대로 사용할 수 없게 됩니다.

이를 해결하기 위해, 'Block--Modifier' 대신 'BlockModifier' 형태의 CamelCase 명명법을 사용할 수 있습니다.

그럼에도 불구하고, 'Block__Element'는 '__' 구분자에 문제가 없으므로 그대로 사용할 수 있습니다.

이를 적용한 예시를 살펴보겠습니다.

// CSS in JS
const styles = {
  menu: { /* block styles */ },
  menu__item: { /* element styles */ },
  menu__item__disabledContents: { /* modifier styles */ }
};

// JSX
<div style={styles.menu}>
  <button style={styles.menu__item}>Item 1</button>
  <button style={styles.menu__item, styles.menu__item__disabledContents}>Item 2</button>
</div>

위 코드에서 'menu', 'menu__item', 'menu__item__disabledContents'는 각각 블록, 요소, 수정자에 해당하며, camelCase 명명법을 사용하였습니다.

이처럼 camelCase를 사용하면 JavaScript 환경에서의 문법 문제를 피하면서도 BEM 방식의 일관성 있는 클래스 이름 규칙을 유지할 수 있습니다.

 

---

End