css in js decision matrix

styled-components는 상태별 스타일이 많을 때 빛난다

컴포넌트 단위 스코프, props 기반 분기, 테마 확장이 필요하면 CSS-in-JS가 유리합니다. 정적 레이아웃 중심이면 CSS 모듈이 더 단순할 수 있습니다.

scope

충돌 감소

고유 클래스가 생성되어 컴포넌트 밖 스타일과 섞일 가능성을 줄입니다.

props

동적 분기

active, disabled, theme 같은 값으로 색상과 크기를 자연스럽게 바꿉니다.

cost

런타임 비용

정적 화면만 많다면 스타일 생성 비용과 라이브러리 의존성이 과할 수 있습니다.

방식맞는 상황주의할 점
styled-components상태별 변형과 테마가 많은 컴포넌트스타일 로직이 커지면 기준을 정해야 합니다.
CSS Modules정적 구조와 페이지 단위 스타일동적 분기는 className 조합이 늘어납니다.
Inline Style값 하나가 즉시 바뀌는 작은 예외의사 클래스와 재사용성이 약합니다.
rule

스타일 도구는 멋보다 변경 경로를 기준으로 고릅니다. 상태와 테마가 컴포넌트 안에서 자주 바뀌면 styled-components, 정적 구조가 많으면 CSS 모듈이 읽기 쉽습니다.