CSS 네이밍

BEM

• Block: 재사용 가능한 독립적인 블록.
• Element: 블록을 구성하는 종속적인 하위 요소.
• Modifier: 블록 또는 요소의 변형(모양, 상태, 동작) → 확장할 때 이용

1. 의미론적 클래스 선택자 작명 규칙. (약어 선택 피함)

2. 다른 형식의 선택자 사용을 제한.(--, __ 제외하고 다른 형식의 기호 피함)

3. 전역에서 유일한 이름 권장.

4. 낮은 선택자 특이성 유지.

5. HTML/CSS 연결이 느슨하고 병렬 개발이 가능.

6. 두개의 언더바(__*)는 하위 요소를 의미

7. 두개의 하이픈(--*)은 상태 변형을 의미

8. 하나의 이름에 요소, 변형은 각 한 번만 허용 (두개 이상 연속 불가)

• 변형 클래스 단독적으로 사용 불가
• 타입 선택자는 안티 패턴

Atomic / Utility First CSS

1. 라이브러리 타입으로 빠른 스타일 구축 가능.
2. 다른 방법론과 함께 사용 가능.
3. 스타일 관점의 작명. 의미론을 사용하지 않음.
4. HTML 코드에 스타일이 강하게 연결됨.
5. HTML/CSS 병렬 개발 불가능. 소규모 팀 또는 단일 엔지니어 개발에 적합.

---

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님