Q45
★ ★ ★ ★ ★
如何看待 CSS-in-JS(含 UnoCSS / vanilla-extract / Styled Components / Emotion)?
⚡ 速记答案(30 秒)
优点:组件级作用域、动态样式、类型安全、与构建深度集成。缺点:部分方案有运行时开销;学习调试成本高。编译型(vanilla-extract、UnoCSS)更适合追求性能的生产环境。
📖 详细讲解
标准面试回答(推荐记住)
CSS-in-JS 是把样式写在 JavaScript 里的方案。优点是组件级作用域不会样式冲突、可以写动态样式、TypeScript 类型安全、与现代构建工具深度集成。缺点是部分方案如 styled-components、Emotion 有运行时开销,学习和调试成本较高。如果追求性能,可以用编译型方案如 vanilla-extract、UnoCSS,它们在构建时生成静态 CSS,没有运行时开销。选择时看团队技术栈和性能要求。
✅ 面试要点
- •组件级作用域
- •运行时 vs 编译时方案
- •根据性能要求选择