WEB · CSS
BEM 클래스 이름 해부도
BEM은 컴포넌트 단위의 Block, 내부 부품인 Element, 상태나 변형인 Modifier를 이름 규칙으로 분리합니다.
분해 흐름
bem
card
독립 컴포넌트 Block
card__title
Block 내부 Element
card--featured
Block 상태 Modifier
combine
HTML에서 역할을 조합
card
→
card__title
→
card--featured
→
combine
BEM 이름 검토
점검
Block
다른 화면에서도 독립적으로 재사용 가능한 단위입니다.
Element
Block 없이 단독 의미가 약한 내부 구성요소입니다.
Modifier
크기, 상태, 강조 같은 변형을 표현합니다.
주의
HTML 구조가 깊어도 이름은 의미 중심으로 유지합니다.