CSS 클래스명을 정돈해보자 BEM ( Block, Element, Modifier ) 방법론

- BEM

 

BEM은 Block(블럭), Element(요소), Modifier(블럭 또는 요소의 속성)을 활용한 CSS 클래스 작성법이다. 

 

- Block

 

Block은 어떤 요소를 담고 있는 컨테이너를 의미한다.

예를 들어 웹이 header, footer, sidebar, article 의 구조로 이루어져 있다면 이런 것들을 block이라 할 수 있다.

block은 그냥 block의 이름을 클래스 명으로 적어주면 된다

 

.block {}
 
/* ex */
 
.header {}
.footer {}

 

- Element 

 

element(요소)는 블럭이 포함하고 있는 한 조각을 의미한다.

그렇기 때문에 요소는 블럭의 클래스명을 적고 두 개의 밑줄 표시 (__)를 해준다음 요소명을 붙여주면 된다

 

.block__element {}
 
/* ex */
 
.header__logo {}
.header__tagLine {}
.header__searchBar {}
.header__navigation {}
 

 

- Modifier

 

modifier는 블럭 또는 요소의 속성을 의미한다. 블럭이나 요소가 어떤 상황일 때 다른 스타일을 가져야 한다면 modifier를 활용하면 된다. modifier는 블럭이나 요소 뒤에 -- 로 구분해준 다음에 붙여주면 된다

 

.block--modifier {}
.block__element--modifier {}
/* ex */
 
.header__navigation {}
.header__navigation--secondary {}
 
.label {}
.label‐‐alert {}

 

- 전체에 적용해야 하나?

 

BEM을 활용한 클래스명 작성은 가독성을 높여주지만 모든 클래스 명을 BEM 방법론에 입각하여 적어줄 필요는 없다.

예를 들어 

 

<div class="content">
    <h1 class="content__headline">Lorem ipsum dolor...</h1>
</div>

 

위와 같은 HTML 구조가 있을 때 headline의 클래스명을 어떻게 줄 것인지는 이 headline이 .content 안에 있기 때문에 특정한 모양이 된 것인지, 아니면 그저 우연히 .content 안에 있는 것인지에 달려있다. 후자라면 BEM을 사용할 필요가 없다.

 

- 참고 

 

BEM(Block Element Modifier) 방법론

 

[번역] BEM으로 사고하기 - BEM 문법 익히기