CSSBa lựa chọn giải quyết cùng một bài toán — cô lập style — nhưng đánh đổi ở chỗ khác nhau.
| Cô lập | Chi phí runtime | Style động theo props | Hợp với | |
|---|---|---|---|---|
| CSS Modules | hash class lúc build | 0 | qua class + biến CSS | Next.js, dự án cần đơn giản |
| Tailwind | không cần (utility) | 0 | qua class có điều kiện | nhóm nhiều người, cần nhất quán |
| CSS-in-JS runtime | tự động | có | trực tiếp bằng JS | thư viện component, theming sâu |
Chọn thế nào trong thực tế:
- Next.js App Router → CSS Modules hoặc Tailwind. Thư viện CSS-in-JS chạy runtime không hoạt động trong Server Component, đây là ràng buộc kỹ thuật chứ không phải sở thích.
- Cần theming sâu (người dùng tự đổi màu, nhiều brand) → CSS custom properties là đủ cho phần lớn trường hợp; chỉ khi logic màu thật sự phức tạp mới cần CSS-in-JS.
- Xây design system dùng chung → cân nhắc zero-runtime (Vanilla Extract, Panda) — cú pháp giống CSS-in-JS nhưng biên dịch ra CSS tĩnh.
Điểm quan trọng khi trả lời: đừng nói "cái nào tốt nhất". Nói ràng buộc quyết định lựa chọn: có Server Component không, có cần đổi theme lúc chạy không, team quen gì. Người phỏng vấn muốn nghe cách bạn ra quyết định, không phải bảng so sánh.