| 등장 배경 | 기본 스타일링 방법 | CSS 확장성과 재사용성을 위해 등장 | 컴포넌트 중심 스타일링을 위해 등장 | CSS-in-JS의 성능 문제 해결을 위해 등장 |
| 컴파일 타이밍 | 없음 (브라우저에서 해석) | 빌드 타임 (CSS 파일 생성) | 런타임 (JS로 스타일 생성) | 빌드 타임 (CSS 파일 생성, Zero Runtime) |
| 문법 | 순수 CSS | CSS 확장 (변수, 중첩, 믹스인 등 지원) | JS 문법을 사용하여 스타일 선언 | JS 문법을 사용하여 스타일 선언 |
| 성능 | 빠름 (최적화 가능) | 빠름 (CSS 파일로 변환됨) | 느릴 수 있음 (JS에서 스타일을 생성) | 빠름 (미리 CSS를 생성하여 런타임 비용 없음) |
| 동적 스타일링 | 불가능 (JS와 직접 연동 어려움) | 불가능 (JS 변수와 연동 어려움) | 가능 (props 기반 스타일 동적 변경) | 제한적 (미리 컴파일된 값만 가능) |
| 대표 라이브러리 | 없음 | Sass, Less, Stylus | Styled-Components, Emotion | Linaria, Vanilla Extract |
| 사용 상황 | 간단한 스타일링 | 재사용성과 유지보수 | 성능 최적화와 정적 스타일링 | 유연한 동적 스타일링 |
