CSS - BEM

HTML Class 이름을 지을 때 마다 많은 고민을 하는거 같다.

사실 Class 이름 뿐만 모든 이름 지을 때마다 고민을 하지만.. 이름 짓는거 너무 어렵다… 😓

이러한 고민을 조금은 덜어줄 BEM이 있다.

BEM (Blcok, Element, Modifier)

Class명을 지을 때 사용할 수 있는 네이밍 컨벤션이라고 할 수 있다.

아래와 같은 식으로 사용할 수 있다.

.body__container {
  margin: 0;
  padding: 0;
}
.btn--primary {
  border: 1px solid #65b836;
}

blockName__elementName--statusName과 같이 블록내의 요소(Element)일 경우는 __ 로 연결하며 상태(Modifier)의 경우 --로 연결하며 사용하는 규칙을 가지고 있다. -은 단순한 두 단어를 연결하여 이름을 지을 때 사용한다.