CSS 방법론 BEM (Block, Element, Modifier)

BEM은 CSS 설계 방법론 중 하나이다.
공식 문서에서는 BEM을 프론트엔드 개발 시 코드 공유할 수 있는 재사용가능한 컴포넌트 생성에 도움을 주는 방법론이라고 설명한다.

일반적인 CSS를 아래와 같이 작성한다면

#opinions_box h1 {
  margin: 0 0 8px 0;
  text-align: center;
}

#opinions_box {
  p.more_pp {
    a {
      text-decoration: underline;
    }
  }

  input[type="text"] {
    border: 1px solid #ccc !important;
  }
}

BEM 방법론을 적용한 CSS는 아래와 같다.

.opinions_box {
  margin: 0 0 8px 0;
  text-align: center;

  &__view-more {
    text-decoration: underline;
  }

  &__text-input {
    border: 1px solid #ccc;
  }

  &--is-inactive {
    color: gray;
  }
}

Block

독립적으로 사용 가능한 객체(컴포넌트)이다. 블록들은 중첩되거나 상호작용할 수 있고, 의미론적으로 그 블록들은 계층이 나뉘지 않는다.
쉽게 이해하면 한번만 사용하거나, 여러 번 재사용 가능한 컴포넌트 모두를 말한다.

명명법: 블록 이름은 라틴 문자(영어), 숫자 및 대시로 구성될 수 있다.
CSS 클래스를 형성하려면 namespace에 대한 짧은 접두사를 추가한다.
ex) .block
HTML: ex) <div class="block">...</div>
CSS: ex) .blcok { color: #333; }

Element

독립적으로 의미를 갖지 않는 블록의 일부분이다. 어느 엘리먼트든 의미론적으로 블록과 묶여있다.

명명법: 블록 이름은 라틴 문자(영어), 숫자 및 대시로 구성될 수 있다.
CSS 클래스를 형성하려면 종속된 block의 이름 뒤에 두 개의 언더스코어(__)를 붙인 뒤 엘리먼트 이름을 추가한다.
ex) .block__elem
HTML: ex) <div class="block"><div class="block__elem">...</div><div>
CSS: ex) .blcok__elem { color: #666; }

Modifier

모디파이어는 블록 또는 엘리먼트에 플래그를 표시한다. 모양, 동작 또는 상태를 변경할 때 사용한다.

명명법: 블록 이름은 라틴 문자(영어), 숫자 및 대시로 구성될 수 있다.
CSS 클래스를 형성하려면 block이나 element 이름 뒤에 두 개의 하이픈(--)을 붙인 뒤 모디파이어 이름을 추가한다.
모디파이어 이름은 boolean변수를 쓰거나 key-value 형식으로 작성한다.
ex) .block--mod, .block__elem--mod, .block--color-black, .block--color-red
HTML: ex) <div class="block block--mod"><div class="block__elem">...</div><div>
CSS: ex) .blcok--mod { color: #999; }