📚前端面试题速记
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 编译时方案
  • 根据性能要求选择