css architecture
CSS 아키텍처 적용 점검표
CSS 아키텍처는 이름을 길게 만드는 규칙이 아니라, 변경 범위와 책임을 분리해 충돌을 줄이는 방법이다. 구조, 이름, 상태, 파일 위치를 함께 본다.
01
Base
태그 기본값과 reset처럼 전체에 적용되는 규칙.
02
Layout
페이지의 큰 영역과 배치 구조를 담당한다.
03
Module
재사용 가능한 UI 단위의 기본 스타일.
04
State
열림, 선택됨, 비활성처럼 변하는 상태.
05
Theme
색, 브랜드, 모드처럼 교체 가능한 표현.
| 방법 | 핵심 질문 | 좋은 신호 | 위험 신호 |
|---|---|---|---|
| OOCSS | 구조와 스킨이 분리됐나? | 같은 구조에 다른 색을 입힐 수 있음 | 색을 바꾸려다 레이아웃이 흔들림 |
| BEM | 이름만 보고 관계를 알 수 있나? | Block, Element, Modifier가 분명함 | 선택자 의존성이 깊어짐 |
| SMACSS | 규칙의 위치와 책임이 맞나? | Base, Layout, Module이 분리됨 | 한 파일에 모든 역할이 섞임 |
충돌
새 컴포넌트를 추가해도 기존 화면이 변하지 않아야 한다.
확장
Modifier나 Theme로 변형을 추가할 수 있어야 한다.
추적
개발자 도구에서 클래스 이름과 파일 위치가 연결돼야 한다.