CSS 방법론 BEM 알아보기

BEM

CSS 는 Cascading Style Sheet 의 약자다. Cascading 의 뜻을 검색해보면 '폭포수처럼 흘러내리는' 이라는 뜻이 나온다. 이것은 CSS가 부모에서부터 자식으로 폭포수처럼 상속되어 적용된다는 뜻을 가지고 있다. 그래서 CSS를 작성할 때는 이 상속관계에 대해서 잘 알고있어야 현재 Element에서 어떤 속성이 적용되고 있는지 알 수 있다. 이러한 CSS 작성 규칙을 예측 가능하게 잘 해보자는 의미에서 나온 방법론이 바로 BEM 이다.

 

BEM은 CSS 작성을 할 때 필요한 Class 명을 어떻게 지을 것인가에 대한 방법론이다. Depth가 별로 깊지 않은 프로젝트에서라면 아무렇게나 클래스 명을 지어도 상관없지만 프로젝트의 규모가 커지고 Depth가 깊어질 수록 클래스 명을 중첩되지 않게 잘 지어야 현재 Element에서 어떤 CSS가 적용되는지 예측 가능하게 되고, !important 를 남발하지 않게 된다.

BEM의 기본 구조

BEM은 각각 Block, Element, Modifier를 뜻한다.

이렇게만 말하면 어렵게 느껴질 수 있는데, 큰 덩어리 단위의 블록, 그리고 그 블록을 구성하는 요소, 마지막으로 요소에 대한 변형을 말한다. 그리고 이 세가지를 __, --, -로 구분한다.

<form class="search-form">
    <input class="search-form__input" />
    <button class="search-form__button">Search</button>
    <button class="search-form__button--color--blue">Clear</button>
</form>

위의 예제에서 볼 때, Block은 search-form, Element는 input과 button, Modifier는 color--blue 이다.

맨 앞에 Block 이름을 쓰고, 그 안의 요소는 __로 연결한다. 그 요소에서 색상 혹은 사이즈 등 변형이 있다면 --로 연결한다. 두 단어 이상이 연결될 때는 - 하나로 연결한다. 이 세가지가 바로 BEM을 구성하는 요소들이다.

 

위의 예제를 SCSS와 합쳐서 사용하면 아래와 같은 형태가 된다.

.search-form{
  &__input{

  }
  &__button{
    &--color{
      &--blue{
        
      }
    }
  }
}

SCSS 와 함께 사용할 경우, nesting 이 가능하기 때문에 더 가독성이 높아지고, mixin을 잘 정의해두면 공통 모듈 사용하기도 쉬워진다. CSS 방법론은 어디까지나 효율적으로 클래스 명을 잘 작성하자는 데에 의의가 있기 때문에 필수로 지켜야 할 사항은 아니지만, 어떻게 해야 프로젝트가 커지더라도 효율적으로 클래스 명을 지을 수 있을 지에 대한 좋은 고민은 필요하다고 생각한다.