CSS-in-JS

定义

CSS-in-JS 是指将 CSS 样式以 JavaScript 代码的形式编写、组织和分发的一类技术方案。它把样式声明内联到组件逻辑中,使样式与组件形成单一的封装单元,常见于以组件为中心的现代前端框架(尤以 React 生态为代表)。[1]

原理

运行时方案(如 styled-components、Emotion)在组件渲染时动态生成带哈希的唯一类名,并将对应的样式规则注入文档的 style 标签,从而实现样式的局部作用域隔离,避免全局命名冲突。这类方案天然支持依据 props 或主题(theme)动态计算样式。零运行时方案(如 vanilla-extract、Linaria)则在构建阶段将样式提取为静态 CSS 文件,把计算前移到编译期,从而消除运行时开销。

特点

优点包括:样式作用域自动隔离;样式可借助 JavaScript 实现动态化与条件逻辑;样式与组件就近维护,便于代码删除与重构;支持基于令牌的主题系统。缺点同样明显:运行时方案会带来额外的 JavaScript 体积与样式注入开销,可能影响首屏性能;与服务端渲染配合时需要进行样式提取以避免闪烁;且与 React 服务器组件的兼容性存在限制。

应用

CSS-in-JS 适用于组件复用度高、需要强样式隔离与动态主题切换的中大型应用。在对性能与 SSR/RSC 兼容性敏感的场景中,业界趋势是转向零运行时方案,或采用 Tailwind CSS、CSS Modules 等以构建期产物为主的替代路径,以兼顾开发体验与运行时表现。