0Pricing
CSS Academy · 课时

Vanilla Extract：零运行时 CSS-in-JS

使用 Vanilla Extract 编写类型安全的 CSS，并在构建时生成静态 CSS 文件。

Vanilla Extract：零运行时 CSS-in-JS 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 Vanilla Extract？

Vanilla Extract 是一个零运行时开销的 CSS-in-JS 库。样式使用 TypeScript 定义，并在构建时编译为静态 CSS 文件，在无需运行时注入样式的情况下提供类型安全。

核心原则

与 styled-components 或 Emotion 不同，Vanilla Extract 完全在构建时运行。JavaScript 导入语句是用于编写样式的接口，输出结果是普通 CSS 文件。客户端不会运行任何 JavaScript 来应用样式。

文件命名约定

Vanilla Extract 文件使用 .css.ts 扩展名：

// button.css.ts
import { style } from '@vanilla-extract/css';

export const button = style({
  background: 'royalblue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '4px',
  cursor: 'pointer',
  ':hover': {
    background: '#2563eb'
  }
});

在组件中使用

导入导出的类名并应用它：

import { button } from './button.css.ts';

function Button({ children }) {
  return <button className={button}>{children}</button>;
}

主题 contract

Vanilla Extract 最强大的功能：定义一个主题 contract（令牌结构），并创建多个实现该结构的主题：

import { createTheme, createThemeContract } from '@vanilla-extract/css';

const contract = createThemeContract({
  color: { primary: null, bg: null }
});

export const lightTheme = createTheme(contract, {
  color: { primary: '#3b82f6', bg: '#ffffff' }
});

export const darkTheme = createTheme(contract, {
  color: { primary: '#60a5fa', bg: '#111827' }
});

styleVariants

创建同一样式的多个变体，避免重复编写：

import { styleVariants } from '@vanilla-extract/css';

export const variants = styleVariants({
  primary: { background: 'royalblue' },
  danger:  { background: 'crimson' },
  ghost:   { background: 'transparent', border: '1px solid royalblue' }
});

// <Button className={variants[variant]}>

使用 @vanilla-extract/recipes 创建配方

recipes 软件包中的 recipe 函数可以优雅地组合基础样式和 variants：

import { recipe } from '@vanilla-extract/recipes';

export const button = recipe({
  base: { padding: '10px 20px', borderRadius: '4px' },
  variants: {
    color: {
      primary: { background: 'royalblue', color: 'white' },
      danger:  { background: 'crimson', color: 'white' }
    },
    size: {
      sm: { fontSize: '0.875rem' },
      lg: { fontSize: '1.25rem' }
    }
  }
});

使用 Sprinkles 创建工具类

@vanilla-extract/sprinkles 可根据令牌集生成工具类，类似于类型安全且零运行时开销的 Tailwind：

类型安全

由于样式是 TypeScript 对象，您可以针对 CSS 属性名称和值获得完整的集成开发环境自动补全和类型检查。属性名称中的拼写错误会在构建时而非运行时被捕获。

构建工具集成

Vanilla Extract 通过专用适配器与 Vite、webpack、esbuild 和 Next.js 集成。提取出的 CSS 会作为静态文件提供。

何时选择 Vanilla Extract

如果您需要以下能力，请选择 Vanilla Extract：

  • 样式具备完整的 TypeScript 类型安全
  • 零运行时 CSS-in-JS 开销
  • 静态 CSS 输出，以获得最高性能
  • 具备类型检查令牌契约的可靠主题系统

快速检查

与 styled-components 等运行时 CSS-in-JS 方案相比，Vanilla Extract 的主要性能优势是什么？

回顾

Vanilla Extract 是一个以 TypeScript 为先、零运行时开销的 CSS-in-JS 库。您可以在 .css.ts 文件中使用类型安全的 JavaScript 对象定义样式。构建时会生成静态 CSS 文件。主题 contract 提供经过类型检查的多主题支持。styleVariants 和 recipe 可以优雅地处理组件 variants。零运行时开销使其非常适合对性能要求极高的应用。

常见问题解答

「Vanilla Extract：零运行时 CSS-in-JS」课时是免费的吗？

是的 — 「Vanilla Extract：零运行时 CSS-in-JS」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Vanilla Extract：零运行时 CSS-in-JS」这节课中我会学到什么？

使用 Vanilla Extract 编写类型安全的 CSS，并在构建时生成静态 CSS 文件。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「Vanilla Extract：零运行时 CSS-in-JS」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. Styled-components：带标签的模板字面量
  2. Emotion：css() 与 styled()
  3. CSS Modules：局部作用域样式
  4. Vanilla Extract：零运行时 CSS-in-JS
← 返回 CSS Academy