CSS 转 JavaScript 转换器，免费

使用方法

此工具解析 CSS 属性并将其转换为 JavaScript 对象语法。kebab-case 属性名（如 background-color）会自动转换为 camelCase（backgroundColor）。CSS 值保持不变。您可以输入单条属性，也可以输入带选择器的完整 CSS 规则。

CSS-in-JS 运动,简史

为什么这种转换问题会存在?因为 2014 年的一代前端开发者认定:把 CSS 放在独立样式表里在大规模上失败了。立此为标的时刻是 Christopher「Vjeux」Chedeau 于 2014 年 11 月 15 日在 NationJS 上的演讲《CSS in JS》，一位 Facebook 工程师论证 CSS 的全局级联、缺乏依赖追踪与死代码累积,使它成为大型Web 应用最糟糕的部分。这场演讲点燃了一场运动。JSS(Oleg Slobodskoi)于 2014 年底作为第一个通用 CSS-in-JS 库发布。CSS Modules 于 2015 年作为构建时的作用域方案出现。styled-components(Glen Maddern + Max Stoiber)于 2016 年 10 月发布,普及了那种把 CSS 写在依附于组件定义的反引号里的 tagged-template-literal API。Emotion(Kye Hohenberger)于 2017 年 7 月 10 日发布,既提供了 styled-components 风格的 API,也提供了更灵活、直接接收 JavaScript 对象的 css prop，这正是本工具产出的格式。Stitches(Modulz / Pedro Duarte)于 2020 年发布,采用基于变体的 API,但在 2023 年中失去维护,并于 2026 年 4 月正式归档。

钟摆又荡回来了。Sam Magura 2022 年 10 月 16 日的《Why We're Breaking Up with CSS-in-JS》（由一位 Emotion 维护者写下）是转折点。技术论据:运行时 CSS-in-JS 让 React 渲染明显变慢(Magura 自己在 Spot Member Browser 上的基准测试将渲染中位时间从 54.3 毫秒降到 27.7 毫秒,从 Emotion 迁出之后大约快了 2 倍);bundle 更大;序列化成本累积。架构论据:React Server Components(由 Next.js 13.4 于 2023 年 5 月 4 日稳定下来)无法使用 React Context,而大多数 CSS-in-JS 库都依赖它做主题化。替代潮流:Tailwind CSS(Adam Wathan,v4 于 2025 年 1 月 22 日发布);Vanilla Extract(Mark Dalgleish 在 Seek,2021 年 3 月 26 日)用于构建时 CSS-in-TypeScript;CSS Modules 提供没有运行时成本的局部作用域类名;以及 Magura 文章自己点名提到的、活下来的「编译为静态」阵营:vanilla-extract、Linaria、Compiled、StyleX 与 Pigment CSS。JSS 自身于 2024 年 5 月 14 日被弃用;styled-components 于 2025 年 3 月 17 日进入维护模式。在 2026 年,运行时 CSS-in-JS 已不再是新 React 项目的默认，但已有的 styled-components 与 Emotion 代码构成的庞大代码库仍然存在,把 CSS 转成这些库的对象形式,对许多团队来说依然是日常现实。

主要库的 API 表面

React 内联样式(style prop) 是普适的基线，每个 React 组件都接受一个 style 对象,其键是 camelCase 的 CSS 属性。不支持伪类(:hover)、媒体查询或 !important;这是旧的 HTML style="..." 属性意义上的「内联样式」,只是用 JavaScript 对象代替了字符串。本工具的输出可以直接落进 style={...}。styled-components 接受包含真实 CSS 字符串的 tagged template literal:const Button = styled.div`background: red; padding: 10px;`。里面的 CSS 是真实的 CSS,kebab-case 也好,什么都好，除非你正从内联样式迁移到 styled 组件,否则你通常不需要这个转换器来处理 styled-components。Emotion 同时支持两种 API:styled API(像 styled-components 那样的 template literal)以及接受 JavaScript 对象(camelCase,正是本工具产出的格式)的 css prop。对于 Emotion 的 css prop,本转换器的输出可以直接使用。JSS 用一种相似的对象格式,带一些额外特性(主题化、自动生成的类名),但基本的 camelCase 属性语法是一样的。Vue 的 style 绑定(:style="...")接受与 React 内联样式相同的 camelCase 对象语法。Vanilla Extract 使用一种更严格、带类型的对象形式,外面包了显式的 style({ ... }) 包装函数;内部的 camelCase 对象形状是一样的。

边角情况与陷阱

• ms 厂商前缀的特例。多数厂商前缀在 camelCase 之后会被首字母大写:-webkit-transform → WebkitTransform、-moz-appearance → MozAppearance、-o-transition → OTransition。但 Microsoft 的前缀是个例外:-ms-flex → msFlex,m 是小写的,因为 React DOM 源代码就是这么定义的。这是 CSS-to-JS 里被搜得最多的一个坑。
• 无单位属性。React DOM 维护了一份属性清单,里面这些属性可以接受裸数字(z-index、opacity、line-height、flex-grow、flex-shrink、order、columns 以及其他若干)。对它们来说,zIndex: 5 没问题。对其他所有属性,带尺寸的值都需要以字符串形式带上单位:width: '100px',而不是 width: 100(后者 React 会默默地当成 '100px'，方便,但如果你想要 % 或 vh 就丢失了信息)。
• calc()、var() 与 CSS 自定义属性。这些都以字符串值的形式工作:width: 'calc(100% - 20px)'、color: 'var(--brand-color)'。自定义属性(CSS 变量)需要把 --name 也用引号包起来:'--my-var': 'red'。
• !important 在 React 内联样式里不起作用。React 的 style prop 会默默忽略 !important 标注。如果你需要覆盖更高优先级的规则,请使用真正的样式表(CSS Modules、Tailwind、styled-components)，内联样式不是对的工具。
• 空字符串内容。content: '' 在 JavaScript 里需要小心地加引号:content: "''"，一个空字符串值,但这个值本身是一个 CSS 空字符串字面量,需要把外围的单引号原样保留。
• 嵌套规则与伪选择器。朴素的 CSS 转 JS 产出的是一个扁平对象，hover 状态、媒体查询和伪元素样式需要按目标库自己的结构来组织。Emotion 的 css prop 支持嵌套对象('&:hover': { background: 'red' });React 的内联样式不支持。
• 简写属性。margin: 10px 20px 10px 20px 在 JS 形式里仍然是字符串:margin: '10px 20px 10px 20px'。React 允许这样的简写;有些 CSS-in-JS 库会警告,它可能会和 longhand 变体之间产生意外的交互。

常见用法

• React 内联样式。把来自设计师或样式表的 CSS 片段转换成 style={...} 对象格式,用于那些没有对应样式表的组件。
• Emotion 的 css prop。从一份独立的 CSS 文件迁移到 Emotion 的对象语法 css prop，camelCase + JS 对象正是它的原生输入。
• JavaScript 动画。GSAP、anime.js、Motion One 与 Framer Motion 都接受 style 对象作为关键帧目标。那里也要 camelCase 格式。
• 设计系统的 token。把 CSS 自定义属性的值转成 JavaScript 常量,用在那些以 TypeScript 或 JS 为唯一真相源的设计-token 系统里(Style Dictionary、Theo 等)。
• JSS 迁移。Material UI v4 及更早版本大量使用 JSS;把 CSS 原型转换成 JSS 对象形式是个摩擦点。注意 Material UI v5+ 默认改用了 Emotion;这更像是一个遗留用例。
• Vue 内联 style 绑定。Vue 模板中的 :style="{...}" 使用与 React style prop 相同的 camelCase 对象格式;本转换器的输出在 Vue 模板中也可以直接使用。

诚实的范围:本工具做什么,不做什么

本工具把 CSS 声明转成 JavaScript 对象语法,使用 camelCase 键和正确加引号的字符串值。它处理厂商前缀的大小写规则(包括小写的 ms 例外)。它不会翻译到某个特定库的 API,只产出 camelCase 对象，你仍要清楚自己的代码库到底想把这个对象塞到 styled.div`...` 里、Emotion 的 css 调用里、React 的 style prop 里,还是 Vue 的 :style 绑定里。这取决于你的库,而不是这个转换器。本工具也不会自动处理嵌套规则与伪选择器，Emotion 的嵌套对象语法('&:hover': {...})和 styled-components 的template-literal 嵌套各有各的写法,需要手工编排。要把整个 CSS 文件迁到某个 CSS-in-JS 库,除了本工具提供的逐属性转换之外,还要做一些重构。

隐私:为什么仅在浏览器里很重要

CSS 很少包含秘密,但专有样式表会泄露一个网站内部的类目分类、设计系统的 token,有时还会通过实验专属的选择器泄露 A/B 测试的假设。服务器端的转换工具要求把 CSS 上传上去,这会留在它们的日志里。对内部产品样式、设计系统真相源文件、或者还在做的品牌化工作来说,「仅在浏览器」的转换可以让一切留在本地。本工具在你的浏览器里完成全部转换，你可以在点击「转换」时打开 DevTools 的 Network 面板自行验证,或者让页面离线(飞行模式),转换器仍然能用。

常见问题

CSS 属性是怎么转换成 camelCase 的?

把一条 kebab-case CSS 属性里的每个连字符去掉,把它后面的字母大写:background-color → backgroundColor、border-radius → borderRadius、margin-top → marginTop。带厂商前缀的属性也走同一套大写规则:-webkit-transform → WebkitTransform(大写 W)、-moz-appearance → MozAppearance。著名的例外是 Microsoft 的前缀:-ms-flex → msFlex,m 是小写的,因为 React DOM 就是这么定义的。

这对媒体查询和伪类也适用吗?

朴素的 JavaScript style 对象(React 的 style prop、Vue 的 :style)不支持媒体查询或伪类，它们是样式表的概念。接受对象语法的 CSS-in-JS 库(Emotion 的 css prop、JSS)通过嵌套对象来支持它们:'&:hover': { background: 'red' }、'@media (min-width: 768px)': { padding: '20px' }。目标库的文档会说明确切的嵌套结构。本工具产出的是扁平对象;你自己手动把它包进库的嵌套语法里。

为什么 !important 在 React 内联样式里不起作用?

React 的 style prop 会默默忽略 !important 标注，它们不属于 JS 对象字面量的语法,React 的渲染器也不会把它们翻译过去。如果你需要覆盖更高优先级的规则,请使用真正的样式表(CSS Modules、Tailwind、styled-components、纯 CSS)。React 的内联样式机制是为一次性或动态样式准备的,这种地方优先级不是要操心的事;!important 应该出现在样式表里。

2026 年我还该用 CSS-in-JS 吗?

对新的 React 项目,目前的默认是「不,用 Tailwind、CSS Modules 或 Vanilla Extract。」Sam Magura 2022 年 10 月那篇来自 Emotion 团队内部的文章,加上 React Server Components 对 Context 的不兼容,把生态推向了仅在构建时运行的方案。styled-components 已于 2025 年 3 月 17 日进入维护模式;JSS 已于 2024 年 5 月 14 日被弃用。对于已经大量投入了 styled-components 或 Emotion 的现有代码库,不必急着迁，两边的库都还能用,运行时开销是那种你在 profiling 里看到再去优化的东西。对 2026 年全新的项目而言:Tailwind v4(2025 年 1 月 22 日发布)是最受欢迎的选择;Vanilla Extract 适合那些希望对样式做严格 TypeScript 类型校验的项目;CSS Modules 适合那些希望抽象层最少的项目。

我能用这种方式转换设计系统的 token 吗?

一次性的小片段,可以。整个设计系统（通常按颜色、间距、字体、动效组织的几十到上百个 token）用专门的工具,比如 Style Dictionary 或 Theo,二者都接受单一真相源(JSON、YAML 或 JS)并向多个目标输出(CSS 自定义属性、JS 常量、iOS Asset Catalog、Android XML 等等)。真正的设计-token 工具的优势在于跨平台一致性;本转换器面向的是这种情况:你手头就有一段 CSS,而且当下就想要 JS 形式。

我的 CSS 会被发到任何地方吗?

不会。转换完全通过 JavaScript 在你的浏览器里跑。你粘贴进来的 CSS 永远不会跨过网络，你可以在点击「转换」时打开 DevTools 的 Network 面板自行验证,或者在页面加载完成后让它离线,确认工具仍然能工作。这对专有样式表、设计系统真相源文件,或任何会泄露你不愿被复制到陌生人硬盘上的内部类目分类的 CSS,都是安全的。

相关工具