BEM (Block Element Modifier) 이란?

BEM  작명규칙

- 개발, 디버깅, 유지보수를 위해서 CSS 이름을 가능한 한 명확하게 만드는 것이 목표이다.

- 소문자, 숫자 만을 이용해서 작명한다.

- 여러단어의 조합은 -으로 연결하여 작명한다.

 

Block

- 재사용할 수 있는 기능적으로 독립적인 페이지 구성 요소. HTML에서 블록은 class 속성으로 표시된다.

- 형태가 아닌 목적에 맞게 결정해야 한다.

- 블록은 환경에 영향을 받지 않아야 한다. 즉, 여백이나 위치를 설정하면 안된다.

- 태그, id 선택자를 사용하면 안된다.

- 블록은 서로 중첩해서 작성할 수 있다.

 

Element

- 블록안에서 특정 기능을 담당하는 부분이다.

- block__element 형태로 사용한다. (double underbar)

- 형태가 아닌 목적에 맞게 결정해야 한다.

- 요소는 중첩해서 작성할 수 있다.

- 요소는 블록의 부분으로만 사용할 수 있고 다른 요소의 부분으로 사용할 수 없다.

- 모든 블록에서 요소는 필수가 아닌 선택적으로 사용한다. 즉, 블록안에 요소가 없을 수 있다.

 

Modifier (수식어)

- 블록이나 요소의 모양, 상태를 정의한다.

- block__element--modifier 이렇게 사용한다. (double 하이픈)

- 수식어의 불리언타입과 키-벨류 타입이 있다.

- form__button--disabled

- color-red, theme-ocean

- 수식어는 단독으로 사용할 수 없다. 즉, 기본 블록과 요소에 추가하여 사용해야 한다.

 

 

혼합사용 (Mix)

- block1, block2__element 형태로 사용할 수 있다.

- block2__element 에 여백이나 위치를 지정하고 block1은 독립적으로 유지할 수 있다.