BEM

CSS BEM (Block-Element-Modifier)은 CSS를 보다 예측 가능하고 유지 보수하기 쉬운 코드로 작성하기 위한 방법론 중 하나입니다. BEM은 CSS 작성 방식에 대한 공식적인 표준은 아니지만, 많은 개발자들이 사용하고 있는 인기있는 방법론 중 하나입니다.

BEM은 HTML 요소의 구조를 기반으로 CSS 클래스를 작성하는 방법입니다. BEM의 핵심 개념은 블록(Block), 요소(Element), 수정자(Modifier)입니다.

 

• 블록(Block): 웹 페이지의 모듈 또는 컴포넌트와 같이 화면에서 독립적으로 존재할 수 있는 대상을 나타냅니다. 블록은 보통 하나 이상의 요소로 구성되며, 하나 이상의 수정자를 가질 수 있습니다. 블록 클래스의 이름은 단순하고 명확해야하며, 스타일시트 전체에서 유일해야 합니다.
• 요소(Element): 블록의 일부이며, 블록에 종속되어 있습니다. 요소는 블록 클래스 이름 뒤에 두 개의 밑줄(__)을 사용하여 표시됩니다. 예를 들어, 메뉴 항목은 메뉴 블록의 요소일 수 있습니다. 요소 클래스 이름은 블록 클래스 이름과 조합하여 사용합니다.
• 수정자(Modifier): 블록이나 요소의 상태 또는 속성을 변경하는 데 사용됩니다. 수정자는 블록이나 요소 클래스 이름 뒤에 두 개의 대시(--)를 사용하여 표시됩니다. 예를 들어, 메뉴 항목의 활성 상태를 나타내는 클래스는 "menu-item--active"일 수 있습니다.

BEM의 이점은 CSS 클래스의 이름이 의미 있는 이름으로 지정되어 가독성이 높아진다는 점입니다. 또한, 스타일이 겹치거나 불필요한 스타일을 적용하는 것을 방지하여 CSS 코드의 유지 보수성을 향상시킵니다.

예를 들어, 다음은 BEM을 사용하여 작성된 HTML 코드와 CSS 코드입니다.

 

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

 

.menu {
  /* 블록 스타일 */
}

.menu__list {
  /* 요소 스타일 */
}

.menu__item {
  /* 요소 스타일 */
}

.menu__item--active {
  /* 수정자 스타일 */
}

 

위 코드는 BEM을 사용하여 작성된 예시입니다. 위 코드에서는 메뉴 블록(Block)을 정의하고, 그 안에 리스트 요소(Element)와 리스트 항목(Element)을 포함합니다. 그리고 리스트 항목(Element) 중에서 "menu__item--active" 클래스는 수정자(Modifier)로 사용되어 활성 상태를 나타냅니다.

 

이와 같이 BEM을 사용하면 클래스 이름이 의미 있는 이름으로 지정되므로 가독성이 향상되며, 스타일 시트의 유지 보수성이 향상됩니다. BEM은 프로젝트의 규모가 커질수록 유용하며, 다른 개발자들과의 협업에서도 유용합니다. 또한, CSS 프레임워크를 사용하지 않는 프로젝트에서 CSS 코드를 구성하는 데 유용합니다.