CSS-in-JS là gì? Ưu nhược điểm?

CSS-in-JS viết CSS trực tiếp trong JavaScript (styled-components, Emotion).

Ưu điểm: styles scoped tự động theo component, dynamic styling dựa trên props/state, CSS co-located với component logic.

Nhược điểm: runtime cost (generate CSS khi chạy), tăng bundle size, SSR phức tạp hơn.

Xu hướng mới: zero-runtime CSS-in-JS như Vanilla Extract, Panda CSS — compile CSS tại build time, không có runtime overhead.

CSS-in-JS writes CSS directly inside JavaScript, with popular libraries like styled-components and Emotion.

Pros: styles are automatically scoped to components (no class conflicts), supports dynamic styling based on props/state, and keeps CSS co-located with component logic.

Cons: runtime cost because CSS is generated at runtime, increases bundle size, and SSR configuration is more complex. The newer trend is zero-runtime CSS-in-JS like Vanilla Extract and Panda CSS — which compile CSS at build time with no runtime overhead.