人人都会AI编程

CSS-in-JS 的优势与性能问题

更新时间：2026-07-11

CSS-in-JS 是一种将 CSS 样式写在 JavaScript 或 TypeScript 文件中的技术方案，代表库有 styled-components、Emotion、vanilla-extract 等。它打破了传统 CSS 与 JS 分离的界限，让样式真正成为组件的一部分，但伴随而来的性能开销也需要开发者清醒认识。

核心优势

1. 真正的样式隔离，告别全局污染

CSS-in-JS 在运行时自动生成唯一的类名（例如 .sc-abc123），从根本上避免了传统 CSS 的全局作用域冲突。你再也不需要纠结 BEM 命名规范或担心样式泄漏，每个组件的样式都天然封闭。

// 两个不同组件都可以使用 .title 而互不影响
const Title = styled.h1`
  color: red;
`;
const Banner = styled.h1`
  color: blue;
`;

2. 基于 Props 的动态样式，组件能力更内聚

样式可以直接访问组件的 Props，实现“一个组件，多种变体”，且逻辑与样式完全集中在一处，不需要维护一堆条件类名。

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
`;

<Button primary>主要按钮</Button>
<Button>次要按钮</Button>

3. 完全拥抱 JavaScript 生态

  • 可以利用 JS 变量、函数、条件、循环来生成样式，复用能力极强。
  • TypeScript 补全和类型检查让样式编写更可靠。
  • 主题（Theme）通过 Context 注入，无需 CSS 变量或复杂的主题切换逻辑。

4. 代码组织更自然

样式与组件同文件或紧邻，开发者不再在 .css、.module.css 和组件文件之间频繁跳转，心智负担降低。

性能问题与隐患

CSS-in-JS 的性能代价主要源于运行时开销和样式注入机制。

1. 运行时生成样式，JavaScript 负担加重

像 styled-components（v5）和 Emotion 在组件渲染时会：

  • 解析模板字符串或样式对象；
  • 生成唯一类名；
  • 将样式注入到 <style> 标签（如果是首次使用）。

这一过程发生在 JavaScript 线程中，会额外消耗 CPU 时间，尤其在页面包含数百个动态样式组件时，可能产生可感知的渲染延迟。对于频繁重渲染的组件（如动画、实时数据列表），CSS-in-JS 可能成为性能瓶颈。

2. 样式注入导致额外布局计算

运行时注入样式通常会触发浏览器重新计算样式（Recalculate Style），甚至引起重排（Reflow）。当微交互更新单个组件的样式时，这点开销可忽略；但在大型应用首次加载或路由切换时，大量样式标签的序列化与插入会明显拖慢时间。

3. 增加打包体积

CSS-in-JS 库本身的体积不小：styled-components 约 12KB gziped，Emotion 约 8KB。同时，样式字符串和逻辑被嵌入 JS bundle，无法像静态 CSS 文件那样被浏览器缓存和并行下载。

4. 服务端渲染（SSR）成本

在 SSR 场景下，服务器需要完成同样的样式生成和注入工作，然后将带有样式标签的 HTML 和包含样式逻辑的 JS 一同发送给客户端。若处理不当，可能导致“样式闪烁”或水合（hydration）不匹配。

5. React 18 并发模式的兼容性

React 18 的并发渲染可能会中断组件渲染，而运行时 CSS-in-JS 的类名生成是副作用，这可能导致 React 抛出警告或行为异常。部分库已做适配，但老版本需谨慎使用。

选型建议与缓解策略

并非所有项目都需要放弃 CSS-in-JS，关键在于识别场景与采用合适的策略。

  • 静态样式优先：尽量将不变样式定义在组件外部，避免每次渲染都重新计算。
  const StyledDiv = styled.div`color: red;`;  // ✅ 定义在组件外
  • 使用零运行时方案：如 vanilla-extract、Panda CSS 或 Linaria，它们在构建阶段生成静态 CSS 文件，彻底消除运行时开销，同时保留 TypeScript 支持和变量能力。
  • 大量样式场景可回退 CSS Modules：如果你的项目有几千个样式类，且很少需要 Props 驱动的动态样式，CSS Modules 提供了类似的隔离性和几乎零性能损耗。
  • 关注包体积：分析你的应用，如果 CSS-in-JS 库是主要体积贡献者之一，考虑替换。
  • React 19 + Server Components：服务端组件本就无运行时 CSS-in-JS 的用武之地，客户端组件也建议采用构建时方案，避免引入额外的 JS 负担。

总结：CSS-in-JS 解决了经典 CSS 的许多工程化痛点，在中小型应用或组件库中尤为舒适。但当应用规模增长、性能成为关键指标时，运行时成本就可能从“可以接受”变成“需要优化”。理解它的代价，你就能在合适的地方使用它，在需要的地方避开它。