StyleX 解读：Meta 的可扩展 CSS 方案
StyleX 是 Meta 为超大规模应用打造的 CSS 方案：写起来像 CSS-in-JS，产物是原子化静态 CSS。本文讲解编译器哲学、API、类型安全设计系统与主题机制。
StyleX 的独特定位：组件内就近写样式（CSS-in-JS 体验）+ 编译期生成原子化 CSS（静态框架的性能）。类型安全的样式 API 与变量主题系统，为 Facebook 级规模的多团队协作而生。
编译器哲学
StyleX 不是运行时库——它是编译器：你在 JS 中写样式对象，编译期生成原子化 class 与极小 CSS 产物。运行时零开销、产物随应用规模亚线性增长（原子类全站复用）——这是它区别于 styled-components（运行时成本）与 Tailwind（类名拼贴）的位置。
定义与应用样式
import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({
card: {
padding: '16px',
borderRadius: '8px',
backgroundColor: { default: 'white', '@media (prefers-color-scheme: dark)': '#1a1a1a' },
},
});
<div {...stylex.props(styles.card)}>...</div>
媒体查询、伪类都内联在属性值的条件对象里——就近且类型安全。
类型安全的设计系统
样式对象是 TS 对象——属性名、取值全部类型检查。设计令牌（token）通过 stylex.defineVars 定义：
export const tokens = stylex.defineVars({
primary: '#0066cc',
spacing: '8px',
});
团队成员拼错 token 名、用错颜色值，编译期即拦截——设计系统的约束从文档变成了类型。
主题机制
stylex.createTheme(tokens, { primary: '#ff0000' }) 创建主题覆盖，应用到子树——CSS 变量的类型安全封装。暗色模式、品牌多皮肤都是同一机制。
适用场景
- 超大型应用、多团队、设计系统严肃——StyleX 的主场；
- 中小项目：Tailwind 的生态与上手速度仍是最优默认；
- 构建接入：官方支持 Next.js（Babel 插件路径），其他构建工具在完善。
常见问题（FAQ）
Q：StyleX 和 Tailwind 的核心差异？
Tailwind 在 className 里拼原子类；StyleX 在 JS 对象里写样式（类型安全、可编程），编译产物同样是原子 CSS。动态样式能力 StyleX 更强（JS 表达式）。
Q：运行时 CSS-in-JS 的问题 StyleX 怎么解决？
没有运行时——全部编译期完成。序列化开销、FOUC、SSR 复杂度这些运行时 CSS-in-JS 的老问题不存在。
Q：能渐进采用吗？
可以——原子类与现有 CSS 共存，按组件迁移。编译器接入（Babel 插件）是主要前置工作。
参考文档
本文依据公开文档整理，示例需按项目依赖版本验证；不将文档中的性能描述视为本项目实测结果。
