在数字世界的构建中，用户界面 (UI) 的美学与功能性如同建筑的外观与结构，共同决定了用户体验的基调。长久以来，层叠样式表 (CSS) 作为网页的「首席形象设计师」，为我们描绘了无数绚丽多彩的数字画卷。然而，随着前端应用日益复杂，传统的 CSS 模式在组件化、模块化的浪潮中逐渐显露出其局限性——全局作用域的冲突、选择器权重的困扰、以及在 JavaScript 组件中管理样式的割裂感，都像是设计师在挥洒创意时遇到的种种束缚。
于是，一群富有远见的开发者们开始思考：能否让样式与组件更加紧密地结合，如同量体裁衣般精准？CSS-in-JS 的概念应运而生，它不仅仅是一种技术，更像是一场前端开发的「文艺复兴」，旨在将 CSS 的力量更优雅、更高效地融入 JavaScript 的编程范式中。这片充满活力的领域涌现了众多流派，它们各具特色，如同时尚界的各大品牌，为开发者们提供了琳琅满目的选择。今天，就让我们一同走进这场代码的「高级定制」时装秀，探索那些引领潮流的 CSS-in-JS 方案。
🎨 styled-components：模板字符串的优雅芭蕾
styled-components 堪称 CSS-in-JS 领域的一位「优雅舞者」。它巧妙地运用了 ES6 中的「标签模板字符串」（Tagged Template Literals）这一特性，让 CSS 代码能够以一种近乎原生的方式书写在 JavaScript 文件中，却又与组件逻辑清晰分离。
注解：标签模板字符串 (Tagged Template Literals)
这是一种特殊的函数调用方式。函数名后直接跟一个模板字符串，模板字符串中的表达式会作为参数传递给该函数。styled-components就利用这个特性，将 CSS 文本解析并应用到组件上。
想象一下，你正在为一位尊贵的客户定制一套礼服。styled-components 就像是你的魔法剪刀和针线，让你能够直接在设计图（JavaScript 组件）旁边勾勒出礼服的每一处细节（样式）。
import styled from 'styled-components';
// 定义一个名为 Button 的 React 组件，它本质上是一个 HTML button 元素
// 紧随其后的反引号 `` 中的内容就是这个按钮的 CSS 样式
const Button = styled.button`
padding: 8px 16px; // 内边距
background: ${props => props.primary ? 'palevioletred' : 'white'}; // 背景色，根据 primary 属性动态改变
color: ${props => props.primary ? 'white' : 'palevioletred'}; // 文字颜色，同样根据 primary 属性动态改变
border: 2px solid palevioletred; // 边框样式
border-radius: 4px; // 边框圆角
`;
// 如何在你的应用中使用这个定制按钮：
// <Button primary>Primary</Button> // 一个主要的、颜色突出的按钮
// <Button>Default</Button> // 一个默认样式的按钮
在这段代码中，styled.button 后面的反引号包裹的就是 CSS。更妙的是，它可以轻松访问组件的 props，实现动态样式，就像根据穿着者的心情或场合变换颜色一样。此外，styled-components 还内置了对主题（ThemeProvider）的支持，能够自动为 CSS 规则添加浏览器前缀，并完美支持服务端渲染（SSR），确保了应用的性能和兼容性。它凭借其直观的语法和强大的功能，迅速赢得了社区的广泛青睐。
💨 Emotion：轻盈迅捷的风格精灵
如果说 styled-components 是优雅的芭蕾舞者，那么 Emotion 则更像一位技艺高超的「风格精灵」——它在保持了与 styled-components 相似的 API 设计的同时，追求更小的打包体积和更优异的运行时性能。
Emotion 提供了两种主要的「施法」方式：一种是类似 styled-components 的 @emotion/styled，同样使用标签模板字符串；另一种则是更为灵活的 @emotion/css，允许你使用 JavaScript 对象或字符串来定义样式。
注解：CSS 对象表示法
将 CSS 规则写成 JavaScript 对象的形式，例如{ color: 'blue', fontSize: '16px' }。这种方式更符合 JavaScript 的编程习惯，也便于进行动态计算和组合。
让我们看看 Emotion 如何用对象来描绘风格：
/** @jsxImportSource @emotion/react */ // 这是告诉 Babel 使用 Emotion 的 JSX 转换器
import { css } from '@emotion/react';
// 使用 JavaScript 对象定义样式
const style = css({
padding: '8px 16px',
backgroundColor: 'hotpink', // 初始背景色
'&:hover': { // & 代表当前元素，:hover 是伪类，表示鼠标悬停时的样式
backgroundColor: 'darkmagenta' // 鼠标悬停时背景色变为深洋红色
}
});
// 应用这个样式到一个普通的 button 元素上
// <button css={style}>Hover me</button>
这种对象写法的魅力在于其简洁和对 JavaScript 生态的无缝融入。你可以轻松地将样式对象拆分、组合、或者通过函数生成，赋予了样式管理极大的灵活性。Emotion 的出现，如同给追求极致性能和现代开发体验的开发者们递上了一双轻便的跑鞋。
🏛️ JSS (react-jss)：源自 Material-UI 的深厚底蕴
JSS，特别是其 React 版本 react-jss，则像是一位经验丰富的「建筑大师」。它的核心思想是将样式完全用纯粹的 JavaScript 对象来表达，并通过一个强大的插件体系来扩展其功能。如果你熟悉 Google 的 Material-UI 设计系统，那么你对 JSS 的风格一定不会陌生，因为 Material-UI 的样式系统正是深深植根于 JSS。
注解：插件体系 (Plugin System)
允许开发者通过添加额外的模块来扩展核心库的功能，例如自动添加浏览器前缀、支持 CSS 变量、嵌套规则等，而无需修改核心代码。这使得 JSS 非常灵活和可定制。
JSS 的工作方式更像是在精心规划一座建筑的蓝图：
import { createUseStyles } from 'react-jss';
// 使用 createUseStyles Hook 定义一组样式规则
const useStyles = createUseStyles({
// 'container' 是一个类名，对应下面的样式对象
container: {
padding: 20, // 内边距 20px
background: '#f0f0f0' // 背景色
},
// 'title' 是另一个类名
title: {
fontSize: 24, // 字体大小 24px
color: '#333' // 字体颜色
},
});
// 在 React 组件中使用这些样式
function MyComponent() {
const classes = useStyles(); // 调用 Hook 生成实际的类名
return (
<div className={classes.container}> {/* 应用 container 类 */}
<h1 className={classes.title}>Hello JSS</h1> {/* 应用 title 类 */}
</div>
);
}
通过 createUseStyles Hook，JSS 将 JavaScript 对象转换成实际的 CSS 类名，并注入到文档中。这种方式使得样式与组件的状态和逻辑可以进行深度集成，非常适合构建大型、复杂的应用程序，尤其是那些需要精细化样式管理和高度可定制主题的项目。
🧩 styled-jsx：Next.js 的内置巧思
在前端框架的生态中，styled-jsx 独树一帜，它是广受欢迎的 React 服务端渲染框架 Next.js 的「内置造型师」。它的核心特性在于支持「作用域 CSS」（Scoped CSS），确保样式只对当前组件生效，有效避免了全局污染。
styled-jsx 的使用方式非常直观，它允许你在组件的 JSX 中直接嵌入一个 <style jsx> 标签，并在其中书写 CSS 代码。
注解：作用域 CSS (Scoped CSS)
指的是 CSS 规则只应用于特定的组件或元素，而不会影响到页面上的其他部分。这在组件化开发中非常重要，可以防止样式冲突，提高代码的可维护性。
想象一下，你在为一个玩具屋的特定房间设计壁纸，styled-jsx 确保这张壁纸只会贴在这个房间里，不会跑到客厅或厨房去。
// 这是一个 React 组件 Card
export default function Card() {
return (
<div className="card"> {/* 这个 div 拥有一个 'card' 类名 */}
<p>Styled JSX</p>
{/* styled-jsx 的核心：在 JSX 中直接写 style 标签 */}
<style jsx>{`
/* 这些 CSS 规则只对 Card 组件内部生效 */
.card { /* 为 'card' 类定义样式 */
padding: 16px;
border: 1px solid #ddd;
}
.card p { /* Card 组件内部的 p 标签样式 */
color: teal;
}
`}</style>
</div>
);
}
这种将样式代码直接置于组件内部的方式，使得组件的结构、逻辑和样式高度内聚，非常符合组件化开发的理念。对于 Next.js 用户而言，styled-jsx 提供了一种开箱即用的、简洁高效的样式解决方案。
👻 Linaria：零运行时的隐形魔法
在追求极致性能的道路上，Linaria 展现了其独特的「隐形魔法」。它属于「零运行时 CSS-in-JS」（Zero-Runtime CSS-in-JS）的流派。这意味着，虽然你在开发时享受着 CSS-in-JS 的便利（例如使用标签模板字符串），但在项目编译构建后，所有的样式代码都会被提取成独立的、纯粹的 CSS 文件。最终加载到用户浏览器的，只有原生 CSS，没有任何用于处理样式的 JavaScript 运行时开销。
注解：零运行时 (Zero-Runtime)
指的是在浏览器加载和运行页面时，不需要额外的 JavaScript 代码来处理或应用样式。所有样式在编译阶段就已经处理完毕并生成了静态 CSS 文件。这可以显著提升应用的加载速度和渲染性能。
Linaria 就像一位在幕后工作的魔术师，它在表演开始前（编译时）就已经把所有的戏法都准备妥当，观众（用户浏览器）看到的只是精彩绝伦的结果，而无需知晓背后的复杂机制。
import { styled } from '@linaria/react'; // 从 Linaria 导入 styled 函数
// 使用与 styled-components 类似的标签模板字符串语法定义样式
const Title = styled.h1`
font-size: 32px;
color: #333;
`;
// 在组件中使用
// <Title>Hello Linaria</Title>
// 编译后，Title 组件会获得一个普通的 CSS 类名，
// 而上述 CSS 规则会存在于一个单独的 .css 文件中。
对于那些对应用启动性能和 JavaScript 包体积有着极致要求的项目，Linaria 提供了一个极具吸引力的方案：既能享受现代 CSS-in-JS 的开发体验，又能获得传统静态 CSS 的性能优势。
✨ Stitches：现代设计系统的精致剪裁
Stitches 是由 Modulz 团队（Figma 的有力竞争者 Radix UI 的创造者）精心打造的 CSS-in-JS 库，它以其现代化的 API、卓越的性能以及对设计系统（Design Systems）的深度支持而备受瞩目。
Stitches 的设计哲学强调变体（variants）、主题化（theming）和响应式设计，使得构建一致且可扩展的 UI 组件库变得更加轻松。
注解：设计系统 (Design Systems)
一套完整的标准、原则、约束和可复用组件的集合，用于指导产品设计和开发，以确保品牌一致性和用户体验的连贯性。Stitches 的 API 设计非常契合构建这样的系统。
Stitches 就像一位为顶级时尚品牌工作的首席设计师，他不仅能创造出惊艳的单品，更能构建起一套完整、和谐的时尚体系。
import { styled } from '@stitches/react'; // 从 Stitches 导入 styled 函数
// 使用 styled 函数创建一个 Box 组件
const Box = styled('div', { // 第一个参数是 HTML 标签名
// 第二个参数是样式对象
padding: '16px',
backgroundColor: '$loContrast', // 使用主题变量 ($loContrast)
borderRadius: '$2', // 使用主题变量定义圆角 (token)
// Stitches 强大的变体 API (variants)
variants: {
color: {
primary: { backgroundColor: '$blue500', color: 'white' },
secondary: { backgroundColor: '$gray300', color: '$gray800' }
},
size: {
small: { padding: '8px', fontSize: '$1' },
large: { padding: '24px', fontSize: '$3' }
}
}
});
// 使用 Box 组件，并应用变体
// <Box color="primary" size="large">Stitches Box</Box>
// 这个 Box 会有蓝色背景、白色文字、较大的内边距和字体。
Stitches 的 API 设计精巧，它鼓励使用预定义的「设计令牌」（design tokens）来管理颜色、间距、字体大小等，这对于维护大型项目和设计系统的一致性至关重要。其近乎零的运行时性能也使其成为性能敏感型应用的热门选择。
💡 其他值得关注的璀璨星辰
除了上述几位「大咖」，CSS-in-JS 的星空中还点缀着许多其他闪亮的星辰，它们各自在特定的领域发光发热：
- goober：如果你追求极致的轻量化，
goober绝对值得一看。它以其大约 1KB 的超小体积，提供了与styled-components相似的 API，堪称「麻雀虽小，五脏俱全」的典范。 - twin.macro：对于喜爱 Tailwind CSS 原子化类名系统的开发者，
twin.macro搭建了一座桥梁。它允许你在 CSS-in-JS 的环境中使用 Tailwind CSS 的类，将两者的优点巧妙结合。 - astroturf：与
Linaria类似，astroturf也是一个零运行时的解决方案，它在编译时将组件中的样式提取到单独的 CSS 文件中，致力于提供最佳的加载性能。
🤔 风格之选：如何为你的项目挑选合适的「霓裳」？
面对如此众多的选择，开发者们可能会感到一丝「选择困难」。其实，挑选合适的 CSS-in-JS 方案，就像为不同的场合挑选合适的服装，需要考虑项目的具体需求和团队的偏好：
- 追求社区成熟度和生态系统：如果你希望拥有庞大的社区支持、丰富的教程资源和成熟的周边工具，那么
styled-components和Emotion无疑是稳妥的选择。它们久经考验，拥有大量的成功案例。 - 追求极致的零运行时性能：对于那些将首屏加载速度和 JavaScript 执行效率置于最高优先级的项目，
Linaria和astroturf提供的零运行时方案将是你的得力助手。 - 项目体积/性能高度敏感：如果你的应用场景对每一 KB 的体积都斤斤计较，或者对运行时的细微性能差异非常关注，那么超轻量的
goober或性能优异的Stitches可能更适合你。 - 与 Next.js 深度集成：如果你正在使用 Next.js 框架，并且希望获得开箱即用的、与框架结合紧密的样式方案，那么
styled-jsx是一个自然而然的选择。 - 拥抱原子化 CSS 思想：如果你是 Tailwind CSS 的拥趸，并希望在 CSS-in-JS 中延续其开发体验，
twin.macro会让你感到宾至如归。 - 构建复杂设计系统：对于需要构建和维护大型设计系统的团队，
Stitches凭借其强大的变体 API 和对设计令牌的良好支持，展现出独特的优势。
🚀 结语：代码时尚的未来已来
CSS-in-JS 的世界充满了创新与活力。从最初解决全局作用域和样式封装的朴素愿望，到如今百花齐放、各具特色的解决方案，我们见证了前端样式管理方式的深刻变革。这些工具不仅仅是代码库，它们更像是一套套精心设计的「时尚理念」，赋予了开发者前所未有的能力去雕琢用户界面的每一个像素，去构建更具表现力、更易维护、性能更卓越的数字产品。
未来，我们可以预见 CSS-in-JS 将继续向着更高性能、更优开发体验、更强类型支持以及与构建工具和设计工具更深度融合的方向发展。正如时尚潮流总是在不断演进，代码的「着装艺术」也将持续焕发出新的光彩。选择一个合适的 CSS-in-JS 方案，就像为你的数字作品挑选一件完美的「霓裳」，它将直接定义用户与之相遇时的第一印象和深层互动的情感连接。
参考文献：
- Styled Components: Enforcing Best Practices In Component-Based Systems. (Max Stoiber, Glen Maddern – 官方文档或相关演讲)
- Emotion: The Next Generation of CSS-in-JS. (Emotion Team – 官方文档或介绍文章)
- JSS: A Authoring Tool for CSS. (Oleg Isonen – JSS 核心贡献者，相关文档)
- Linaria: Zero-Runtime CSS in JS. (Anatoliy Gatt – Linaria 创造者，相关博客或文档)
- Next.js Documentation: Built-In CSS Support (including styled-jsx). (Vercel Team – Next.js 官方文档)