[CSS] Block Element Modifier (BEM)

BEM의 카테고리가 많이 고민되기는 했지만 CSS를 적용하는 것에 사용하기도 하고, 구글에 BEM을 검색하면 CSS 얘기만 나와서 CSS로 분류하기로 했다.

 

BEM은 Block Element Modifier의 줄임말로, 변수명이나 클래스명, 아이디명을 짓는 것에 주로 사용한다.

 

XX__YY 형식: underscore가 2개 있는 것으로, 요소의 일부분임을 알릴 때 사용한다.

<li class="item">
          <div class="item__name">COFFEE</div>

XX--YY형식 : hyphen을 2개 사용한 것으로 요소의 상태를 표시한다.

 

<div class="btn btn--primary"></div>
<div class="btn btn--success"></div>
<div class="btn btn--error"></div>

 

꼭 사용해야 하는 건 아니고 이런 걸 사용하면 변수명을 고민안해도 되기도 하고 복잡할 때 꼬이게 될 일도 없어서 권장하는 정도인 듯하다.