[CSS] Bem 이란?

Bem 은 Block Element Modifier 의 약자이며, CSS 개발 방법론이다.

말 그대로 Block 다음에 Element(내부요소) 다음에 Modifier(기능)순으로 네이밍을 한다는 의미이다.

 

큰 틀은 article__button--alert 이다.

Block은 Header / nav / article / footer 등 block요소를 지칭하는 것이다.

 

Element는 블록 내부에서 실제 기능을 담당하는 요소를 말한다.

 

Modifier는 element의 기능 이나 속성을 지칭한다.

 

여러 블로그를 보면서 이 방법을 쓰는 이유는 크게 2가지로 생각된다.

 

1.

.lists .list .items .item과 같은 중복 표현을 

.list__item 요렇게 간결하게 줄이면서 보기 편하게 만든다는 점

 

2.

네이밍을 고민하지 않고, 딱 한눈에 봤을때 

.list__item 이면,

"아, list라는 block 안에 item이라는 요소를 지칭하는 것이구나!" 

라고 바로 이해할 수 있다는 점 

 

아직 실제 프로젝트에서 사용해보지 않아서, 장단점을 확실히 말할 순 없지만, 요즘 네이밍에 대한 고민이 많은 시점에서 한번 지속적으로 사용해 볼만한 방법론 인 것 같다.

 

+SASS와 함께쓰면 더욱 좋은 것 같다.