프론트엔드 로드맵 27 - CSS 구조 방법론 BEM(Block Element Modifier)

BEM(Block Element Modifier)은 CSS구조를 개선시키기 위한 방법론(convention)을 말한다. 클래스 이름을 짓는 것에 대한 방법을 제시하며 ID에는 사용이 불가하다(오로지 클래스명에만).

BEM 방법론의 이점으로는

보다 쉽게 네이밍을 할 수 있다.

클래스명을 여러번 반복해 재사용하고 HTML과 CSS의 코딩 구조가 일관되도록 한다.

유지/보수가 쉽고 보다 유연한 코드를 만든다.

 

BLOCK 블록

한 페이지 안에 구현되는 요소들을 영역으로 구분짓고 이에 따른 이름을 붙인다.

각 페이지마다 재사용할 수 있으면서 자체적으로 의미가 부여되어 있다. 블럭은 클래스명의 가장 처음 자리에 온다.

ex) header, container, menu, input, button 등

 

ELEMENT 요소

블록 안에 포함되는 일부분으로 블록의 의미론적인 구조에 영향을 받는다. 클래스명에는 블록 다음 차례에 온다. (모디피어스가 명명되지 않으면 가장 마지막 자리에도 온다)

ex) menu-item, headTitle, logo, searchbar, navigation 등

 

Modifiers 모디피어스

블록 혹은 요소의 모양, 상태, 동작을 정의한다. modifiers 자리에는 요소(혹은 블록)의 크기는 어떤지, 다른 요소들과 차별점은 없는지, 어떤 동작을 하는지를 따져보고 집어넣는다. 가장 마지막 자리에 온다.

ex) size-big, shadow-yes, direction_left-top 등

 

각 컨벤션에서 내세우는 규칙은 조금씩 다르게 설명하고 있긴한데, 보통 명명할 때에 중간 사이에 -(하이픈), _ (언더바) 를 넣기도 하고 (예 size-small, search_bar), 중간에 대문자를 집어넣는 카멜식 표기법을 쓰기도 한다. 또 간단명료하게 표현하는 것이 좋은데 그래서 navigation을 nav 정도로 줄여 쓰기도 한다. 무엇보다 중요한 것은 통일성이다.

 

위에서 설명한대로 B - E - M 규칙대로 네이밍을 하자면

ex) header__menu-item__size-big

     button--colorBlack

     container--logo-direction_top

 

쯤으로 정리할 수 있다.

B - E - M 사이에는 보통 언더바를 2번 써서 __ 명시도를 높이는데, -- 하이픈으로 표기하는 곳도 있다.

또 B와 E 사이에는 2번을 쓰는 반면 E와 M 사이에는 1번만 써서 B/E/M의 차이를 분명하게 하는 곳도 있다.

 

 

 

참고 사이트 : https://en.bem.info/methodology

http://getbem.com/introduction/

https://webclub.tistory.com/263