[코딩 공부_35] bem class명 규칙

오늘은 css 클래스 네임을 어떻게 지으면 좋을지 고민하는 시간을 가져보도록 하자! 

 

1. BEM의 기본 구조

 - BEM은 Block, Element, Modifier를 뜻한다.

 - 저 세가지를 이용하여 각각 __와 --로 구분한다.

 ① 블럭(Block) : 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말한다

.header { property: value; }
.footer {{ property: value; }

 

② 요소(Element) : 블럭이 포함하고 있는 한 조각이다 (__로 표시)

.header__logo { property: value; } 
.header__tagline { property: value; } 
.header__searchbar { property: value; } 
.header__navigation { property: value; }

 

 ③ Modifier : 요소의 상태를 표현한다(--로 표시)

.header__navigation‐‐secondary {…}

 

* bem의 장점

  - class name 중복을 방지한다

  - 직관적이다