CSS Naming Conventions BEM

BEM(Block Element Modifier)은 크게 Block으로 영역을 짓고, Element로 지정하며, Modifier로 상태를 표시합니다.

 

즉, __를 쓰는 경우와 --를 쓰는 경우를 분리한 것인데,

__는 명사와 같은 이름을 사용합니다. (__button, __title, __meun 등)

--는 동사와 같은 상태를 이름으로 사용합니다.(--active, --disabled, --full 등)

 

예를 들면,

<div class="search">

       <button class="search__btn search__btn--active">BUTTON</button>

       <button class="search__btn search__btn--disable">BUTTON</button>

</div> 라는 식으로 코드를 작성하는 경우입니다.

 

공통 요소에 BEM 방식을 적용하는 것은 옳지 않을수도 있습니다.

또, 모든 요소에 BEM 방식을 적용하기에 어려운 점도 많습니다.

header, nav, footer 등 구역을 지칭하는 것들은 보통 일반적인 위치에 존재하기 떄문에 굳이 BEM 방식을 적용하지 않아도 직관적으로 소스파악하는데 어렵지 않기 떄문입니다.

BEM은 하나의 특정역역에 클래스만으로 역역의 형태나 상태를 파악하는데 좀더 직관적이고 좀 더 쉽게 알아보기 위한 도움의 역할로서 사용되는데 의미가 있습니다.