BEM은 CSS표기법

 

BEM이란(Block Elements Modifier)

BEM은 CSS 개발 방법론, 네이밍 컨벤션이다. html 요소들을 각각 Block, Element, Modifier 세 가지로 분류해 작명한다. Block 다음에 Element(내부요소) 혹은 Modifier(상태)순으로 네이밍 한다.각각의 BEM은 각자의 역할이 따로 있으므로 역할에 알맞은 클래스를 붙여야 한다.

.block {}
// 더 높은 단계의 추상(abstraction) 혹은 구성요소(component)를 나타낸다.

.block__element {}
// block의 자식 | 구성요소

.block--modifier {}
// block의 다른 상태 | 버전 | 종류를 나타낸다.

사용 예시

.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}

정리

1. Hypen naming 작성한다: camelCase under_hypen 지양한다.
2. js 키워드를 추가하여, 해당 dom요소가  js에서 사용하고 있음을 표현하는 방법이 있다.
3. CSS는 병렬적 구조로 이루어져 있기 때문에 필요한 경우 주석을 통해 충분한 설명하자,
4. 이름은 의미를 파악할 수 있을 정도로만 줄여야한다.