[HTML, CSS] CSS 방법론 - BEM 방식

웹페이지를 개발할 때, 일관성 있고 구조화된 네이밍 방식은 다른 사람들과의 협업이나 유지 보수를 용이하게 만듭니다. 이번 글에서는 대표적으로 사용되는 네이밍 방식 중 하나인 BEM 방식에 대해서 소개하겠습니다. 

 

블럭, 엘리먼트, 모디파이어(Block, Element, Modifier)의 축약어인 BEM은 세 가지 부분을 각각 더블 언더바(__)와 더블 하이픈(--)으로 구분합니다. 사용 예시는 다음과 같습니다.

.block__element--modifier {
  ...
}

 

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

* BEM 방식은 아이디보다는 클래스의 명칭을 사용합니다.

** 만약 여러 단어를 사용해야 될 때는 싱글 하이픈(-)으로 연결합니다. 

 

① 블럭 

블럭은 독립적으로 기능할 수 있어서 분리가 가능한 부분을 의미합니다. 보통 웹페이지 안에서 header, footer, sidebar와 같은 큰 부분을 나타냅니다. 다른 블럭이나 엘리먼트에 의존하지 않으며 재사용이 가능하다는 점은 독립성이 있는 블럭의 특징입니다. 또한 블럭은 중첩이 가능한데 서로에게 종속적이지 않기 때문에, 우선순위나 계층 구조 존재하지는 않습니다. 

블륵의 사용 예시로는 button, form, header 등이 있습니다.

 

② 엘리먼트

엘리먼트는 블럭을 구성하는 요소로, 더블 언더바(__)로 구분합니다. 엘리먼트는 블럭과 달리 의존적인 형태이기에 자신이 포함되어 있는 블럭 안에서 의미를 가지며, 블럭 외부에서는 재사용이 불가능합니다. 엘리먼트 끼리는 중첩이 가능하며. 우선순위나 계층 구조가 존재하지 않습니다. 

button이 블럭으로 사용되었다면, 그에 대응하는 엘리먼트의 사용 예시로는 label, icon 등이 있습니다. 

 

③ 모디파이어

모디파이어는 블럭이나 엘리먼트가 특정 상황에서 구분되는 속성이나 상태를 가지고 있음을 나타내는데 사용됩니다. 더블 하이픈(--)으로 구분하며, 이름을 작성할 때는 시각적 요소보다는 기능적 의미를 담는 것이 좋습니다.

모디파이어 이름을 지을 때는 Boolean type이나 Key-value type을 사용할 수 있습니다. 전자는 값을 true로 가지는 불리언을 사용해서 상태를 표현하는 것으로, 예시로 abled, disabled 등이 있습니다. 후자는 실제 속성과 속성 값을 사용하는 것으로 color-red, color-black과 같이 표현할 수 있습니다.