CSS 방법론인 BEM에 대한 내용으로 BEM이란 'CSS classname을 어떻게 지으면 좋을지'에 대한 내용입니다.
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은 쉽게 생각하면 재사용이 가능하며 기능적으로 독립적인 페이지 컴포넌트라고 보시면 됩니다.
예를 들면 지금 1페이지에서 쓰이는 block을 떼어다가 2페이지에서 그대로 쓸 수 있을 때 block이라고 보시면 될 것 같습니다.
element는 블럭을 구성하는 단위로 특정 블럭 안에서만 의미를 가지는 element라고 보시면 됩니다.
modifier는 block이나 element의 속성을 담당합니다. 예를 들면 특정 block 이나 element의 size 또는 color를 변경시키고 싶을 때 사용하시면 됩니다.