CSS-in-JS

CSS-in-JS 도입 기준

CSS-in-JS는 props 기반 스타일과 테마 조합에 강하지만 runtime 비용, SSR 설정, hydration 일관성을 확인해야 한다.

01

동적 요구를 증명한다

단순 class 조합으로 충분한데 CSS-in-JS를 도입하면 런타임과 설정 비용만 늘 수 있다.

02

SSR 설정 확인

서버 렌더링에서 style이 누락되거나 hydration mismatch가 생기지 않도록 framework integration을 검증한다.

03

토큰 체계를 맞춘다

디자인 시스템의 variant, theme, responsive rule이 코드에서 일관되게 표현되는지 본다.

Runtime style
동적 표현력 props에 따라 스타일을 계산하기 쉽다.
많은 노드에서 비용을 본다.
SSR extraction
초기 렌더 품질 첫 화면에서 스타일이 늦게 붙는 FOUC를 막아야 한다.
라이브러리별 설정이 다르다.
Static CSS
단순성과 성능 대부분 정적인 스타일은 CSS Module이나 전역 CSS가 더 단순하다.
도입 기준을 세운다.
Variant
컴포넌트 API size, tone, state 같은 선택지를 타입과 스타일로 연결한다.
무제한 props 스타일을 피한다.

기준 · SSR · 비용 점검

필요성 동적 테마나 variant 요구가 CSS Module보다 분명히 큰가.
SSR 새로고침 첫 화면에서 스타일 누락이나 mismatch가 없는가.
비용 런타임 스타일 계산이 큰 목록이나 자주 바뀌는 UI에 부담이 되지 않는가.

도입 질문

// Can className variants solve this?
// Does SSR style extraction work?
// Are tokens typed and shared?