견고한 UI 설계를 위한 마크업 가이드 강의를 봅시다.
BEM
Block
재사용 가능한 독립적인 블록.
Element
블록을 구성하는 종속적인 하위 요소.
엘리먼트는 무조건 블록에 종속한다. 엘리먼트 혼자 존재할 수 없음.
Modifier
블록 또는 요소의 변형(모양, 상태, 동작)
하나의 블록 / 엘리먼트 스타일을 확정하거나 다르게 만들 때는 Modifier를 붙인다.
BEM의 특징
- 의미론적 클래스 선택자 작명 규칙
- 다른 형식의 선택자 사용을 제한
- 전역에서 유일한 이름 권장
- 낮은 선택자 특이성 유지
- HTML/CSS연결이 느슨, 병렬 개발 가능
BEM 명명 규칙
- 두 개의 언더바(__)는 하위 요소를 의미
- 두 개의 하이픈(–)은 상태 변형을 의미
- 하나의 이름에 요소, 변형은 각 한 번만 허용.
사용 예시
- .block
- .block__element
- .block__element–modifier
- .block–modifier
BEM 선택사항
키워드 연결 방법
- PascalCase
- camelCase
- kebab-case
- snake_case