CSS-in-JS는 동적 가치가 runtime·SSR 비용보다 클 때 고른다

컴포넌트 응집도뿐 아니라 style 생성과 캐시, 서버 수집 비용을 함께 본다.

실행 중 스타일이 실제로 바뀌는가?동적 요구와 SSR 운영 비용을 비교
정적 UI

CSS Modules

runtime 없이 지역 scope와 빌드 결과 사용

토큰 조립

Tailwind

정해진 규칙을 class 조합으로 빠르게 적용

props style

CSS-in-JS

동적 variant 가치가 분명할 때 선택

SSR 사용

Registry 필수

style collect·insert·hydrate 계약을 운영

핵심정적 페이지에 런타임 도구를 쓰거나 SSR 설정 없이 동적 style을 쓰면 비용과 깜빡임만 늘 수 있다.