[CSS] BEM(Block, Element, Modifier) 모델

 

BEM(Block, Element, Modifier) 모델은 CSS 클래스 네이밍을 체계적으로 관리하기 위한 방법론입니다. 이 모델은 CSS 코드를 구조화하고, 일관성 있게 유지하기 위해 고안된 것으로, 대규모 프로젝트에서 특히 유용합니다.

BEM 모델의 핵심 개념

1. Block (블록)

.menu { /* Block */ }

• 블록은 독립적이고 재사용 가능한 UI 구성 요소입니다. 블록은 의미적으로 자율적이며, 다른 블록에 의존하지 않는 개별적인 기능을 수행합니다.
• 예를 들어, 페이지의 헤더, 버튼, 메뉴, 폼 등의 UI 구성 요소가 블록에 해당됩니다.
• 블록은 프로젝트 내에서 여러 번 재사용될 수 있으며, 다른 블록과 결합하여 복잡한 UI를 구성할 수 있습니다.

2. Element (엘리먼트)

.menu__item { /* Element */ }

• 엘리먼트는 블록의 일부로, 블록에 속하는 구성 요소입니다. 엘리먼트는 블록과 독립적으로 존재할 수 없으며, 항상 특정 블록의 맥락에서만 의미를 가집니다.
• 엘리먼트는 블록을 구성하는 부분이기 때문에, 블록과 긴밀한 관계를 가지고 있으며, 블록의 구조와 스타일을 정의하는 데 중요한 역할을 합니다.
• 예를 들어, 버튼 블록의 텍스트, 메뉴 블록의 아이템 등이 엘리먼트에 해당됩니다.

3. Modifier (수정자)

.menu__item--active { /* Modifier */ }

• 수정자는 블록이나 엘리먼트의 상태나 변형을 나타냅니다. 수정자는 블록이나 엘리먼트의 외형, 상태, 행동을 변경하는 데 사용됩니다.
• 예를 들어, 버튼이 활성화되거나 비활성화될 때, 메뉴 아이템이 선택되었을 때 등의 상황에서 수정자가 사용됩니다.
• 수정자는 블록이나 엘리먼트의 기본 스타일을 확장하거나 덮어쓰기 위해 사용되며, 다양한 변형을 쉽게 적용할 수 있도록 도와줍니다.

BEM의 목적과 장점

HTML:

<div 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>
</div>

 

CSS:

/* Block */
.menu {
  background-color: #333;
}

/* Element */
.menu__list {
  list-style: none;
  padding: 0;
}

.menu__item {
  display: inline-block;
  padding: 10px;
  color: white;
}

/* Modifier */
.menu__item--active {
  background-color: #555;
}

1. 명확한 구조:
   • BEM의 주요 목적 중 하나는 CSS 코드의 구조를 명확히 하는 것입니다. 클래스 이름만으로도 해당 요소가 어떤 블록에 속하고, 어떤 역할을 하는지 쉽게 이해할 수 있도록 해줍니다. 이는 코드의 가독성을 크게 향상시키며, 유지보수를 쉽게 만듭니다.
2. 재사용성과 확장성:
   • BEM은 블록과 엘리먼트를 명확하게 구분함으로써 코드의 재사용성을 높입니다. 같은 블록을 여러 곳에서 사용하더라도, 각 블록의 엘리먼트와 수정자가 독립적으로 관리되기 때문에 충돌 없이 사용할 수 있습니다. 이는 프로젝트가 커지더라도 기존 코드를 쉽게 확장할 수 있게 해줍니다.
3. 모듈화된 CSS:
   • BEM은 CSS를 모듈화하여 관리할 수 있도록 돕습니다. 각 블록, 엘리먼트, 수정자가 독립적인 역할을 하도록 설계되어 있어, 다른 부분과의 의존성이 최소화됩니다. 이는 팀 작업 시에도 서로의 작업이 충돌하지 않도록 하며, 코드의 일관성을 유지하는 데 기여합니다.
4. 전역 네임스페이스 문제 해결:
   • 전통적인 CSS 작성 방식에서는 클래스 이름이 충돌할 가능성이 큽니다. BEM은 이 문제를 해결하기 위해 네임스페이스를 도입합니다. 즉, 클래스 이름이 블록과 엘리먼트, 수정자의 구조에 따라 고유하게 구성되므로, 클래스 이름이 중복될 가능성이 줄어듭니다.
5. CSS 유지보수의 용이성:
   • BEM은 유지보수성을 극대화하기 위해 설계되었습니다. 명확한 구조와 일관된 네이밍 규칙 덕분에, 프로젝트의 규모가 커지더라도 쉽게 이해하고 수정할 수 있습니다. 새로운 블록이나 엘리먼트를 추가할 때도 기존 코드와의 충돌을 최소화할 수 있습니다.

BEM의 단점

1. 복잡한 클래스 이름:
   • BEM을 사용하면 클래스 이름이 길어질 수 있습니다. 특히 복잡한 구조의 블록이나 엘리먼트가 많아지면, 클래스 이름이 지나치게 길어져 가독성이 떨어질 수 있습니다. 이는 코드 작성 시 타이핑의 번거로움으로 이어질 수 있습니다.
2. 도입 초기의 학습 곡선:
   • BEM을 처음 도입할 때는 개발자들이 이 방법론에 익숙해지기까지 시간이 걸릴 수 있습니다. 특히 기존의 CSS 작성 방식에 익숙한 개발자에게는 BEM의 규칙과 구조가 다소 낯설게 느껴질 수 있습니다.

사용 프로젝트 바로가기

https://github.com/yejify/blog-app/blob/main/src/index.css

blog-app/src/index.css at main · yejify/blog-app

 

결론

BEM은 CSS를 구조화하고 일관성 있게 관리하기 위한 강력한 방법론입니다. 프로젝트의 규모가 커지고 복잡해질수록 BEM의 장점은 더욱 두드러지며, 명확한 구조, 재사용성, 모듈화된 CSS 작성 방식을 통해 유지보수성과 확장성을 극대화할 수 있습니다. BEM은 특히 대규모 프로젝트에서 CSS 코드의 혼란을 방지하고, 코드의 가독성과 유지보수성을 높이는 데 매우 유용합니다.

 

참고 사이트

https://nykim.work/15

[CSS 방법론] BEM 방식