CSS 방법론인 BEM에 대한 내용으로 BEM이란 'CSS classname을 어떻게 지으면 좋을지'에 대한 내용입니다.

BEM의 기본 구조

BEM은 Block, Element, Modifier를 뜻하고 각각 __와 --로 구분합니다.

예를 통해 알아보면

/* Block */
.btn {}

/* Element that depends upon the block */
.btn__price {}

/* Modifier that cahnges the style of the block */
.btn--orange {}

Block

block은 쉽게 생각하면 재사용이 가능하며 기능적으로 독립적인 페이지 컴포넌트라고 보시면 됩니다.

예를 들면 지금 1페이지에서 쓰이는 block을 떼어다가 2페이지에서 그대로 쓸 수 있을 때 block이라고 보시면 될 것 같습니다.

Element

element는 블럭을 구성하는 단위로 특정 블럭 안에서만 의미를 가지는 element라고 보시면 됩니다.

Modifier

modifier는 block이나 element의 속성을 담당합니다. 예를 들면 특정 block 이나 element의 size 또는 color를 변경시키고 싶을 때 사용하시면 됩니다.

BEM의 장점

1) 클래스 네임만으로 마크업 구조를 알 수 있습니다.

2) SASS의 부모참조자(&)와 함께 사용할 때 매우 편리합니다.

3) SASS에서 중첩 사용을 줄일 수 있습니다.

BEM의 단점

1) 클래스네임이 지나치게 길어질 수 있습니다.

참고) https://nykim.work/15
참고) https://blog.illunex.com/bem