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 {}

정리

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