블로그 예제의 클래스는 어느 CSS 파일에 둘까 여부
l-header, main-nav, post-card, is-active를 Base, Layout, Module, State로 나누면 파일 책임이 먼저 보인다.
| 분류 | 담는 규칙 | 예시 | 판단 기준 |
|---|---|---|---|
| Base | 기본 태그 스타일과 reset | body, a, img | 프로젝트 전체 기본값인가 |
| Layout | 페이지 큰 영역 배치 | l-header, l-main | 컴포넌트를 감싸는 구조인가 |
| Module | 재사용 가능한 UI 조각 | post-card, main-nav | 독립적으로 반복 가능한가 |
| State | 상태 변화 표현 | is-active, is-open | 동작 중 바뀌는가 |
| Theme | 색상과 분위기 변형 | theme-dark | 구조가 아니라 표현만 바꾸는가 |
SMACSS의 목적은 이름을 멋지게 짓는 것이 아니라 CSS 변경 이유와 영향을 파일 책임으로 좁히는 것이다.