BEM(Block Element Modifier)
작명규칙(Naming Convention)
- 개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만드는 것이 목표이다.
- 소문자, 숫자 만을 이용해서 작명한다.
- 여러단어의 조합은 하이픈(-) 으로 연결하여 작명한다.
블록(Block)
- 재사용할 수 있는 기능적으로 독립적인 페이지 구성요소. HTML에서 블록은 class 속성으로 표시된다.
- 형태(red, big)가 아닌 목적(menu, buttom)에 맞게 결정해야 한다.
- 블록은 환경에 영향을 받지 않아야 한다. 즉, 여백이나 위치를 설정하면 안된다.
- 태그, id 선택자를 사용하면 안된다.
- 블록은 서로 중첩해서 작성할 수 있다.
예) header, menu, search-form ...
요소(Element)
- 블록안에서 특정 기능을 담당하는 부분.
- Block__element 형태로 사용(더블 언더바)
- 형태(red, big)가 아닌 목적(item, text,title)에 맞게 결정해야 한다.
- 요소는 중첩해서 작성 할 수 있다.
- 요소는 블록의 부분으로만 사용할 수 있고 다른 요소의 부분으로 사용할 수 없다.
- 모든 블록에서 요소는 필수가 아닌 선택적으로 사용한다. 즉, 블록안에 요소가 없을 수도 있다.
예) menuitem, headertitle ...
수식어(Modifier)
- 블록이나 요소의 모양(color, size ...), 상태(disabled, checked ...)를 정의한다.
- block__element -- modifier, block -- modifire 형태로 사용(더블 하이픈)
- 수삭어의 boolean 타입과 key-value 타입이 있다.
- Boolean Type : 수식어가 있으면 값이 true 라고 가정한다.
- Key-Value Type : 수식어는 단독으로 사용할 수 없다. 즉, 기본 블록과 요소에 추가하여 사용해야 한다.(class="blockelement blockelement--modifier")
