CSS变量不能替代原子类，因其不生成样式且构建工具无法识别；真正可行的是在构建时读取:root变量生成真实类名，如.mt-2{margin-top:0.5rem}。
不能直接用 CSS 变量实现“无类名”的原子化设计——CSS 变量本身不生成样式，也不替代类名；所谓“无类名”，本质是误读或混淆了构建时与运行时的职责边界。
为什么 var(--mt-2) 不能当原子类用
很多人尝试在 HTML 元素上写 style="margin-top: var(--mt-2);"，以为这就绕过了类名、实现了“无类名原子化”。但问题立刻浮现：
- 构建工具（如 Tailwind、UnoCSS）完全无法识别
var(--mt-2)是否被使用，purgecss会把它当死代码删掉，或干脆留一堆未使用的变量定义 - 浏览器调试时看不到真实数值：你在 DevTools 里看到的是
margin-top: var(--mt-2)，而不是margin-top: 0.5rem，排查布局问题时多一层跳转 - 响应式、暗色模式等变体无法自动展开：
dark:margin-top: var(--mt-2)是非法语法，var()不支持伪类上下文切换 - 性能上反而更重：每次重排重绘都要解析变量链，而原生原子类是静态声明，零运行时开销
真正可行的路径：用 :root 变量驱动类生成，而非替代类
原子化框架（如 UnoCSS、Tailwind）读取 :root 中的变量，是在构建阶段（build time）生成真实类名，比如：
:root {
--spacing-2: 0.5rem;
--color-primary: #3b82f6;
}
然后工具链据此生成：
立即学习“前端免费学习笔记（深入）”；
.mt-2 { margin-top: 0.5rem; }
.text-primary { color: #3b82f6; }
- 你写的仍是
class="mt-2 text-primary"，不是style="margin-top: var(--spacing-2)" - 变量只做“数值源”，不参与样式交付；所有交付到浏览器的都是真实、扁平、可 Purge 的类
- 改一个
--spacing-2，重新构建后所有mt-2/mb-2/p-2自动更新，无需手动搜替换
哪些地方真能“不用类名”？但和原子化无关
如果你执着于“无类名”，现实中只有两类场景可行，但它们不属于原子化设计范畴：
-
style属性硬编码值：<div style="margin-top: 0.5rem; color: #3b82f6">—— 失去复用、不可 Purge、无法响应变体，仅适合极临时的内联覆盖 - CSS-in-JS 动态注入（如 styled-components 的
css模板）—— 它靠 JS 运行时计算，不是原子化，也不具备原子类的编译期确定性与 Tree Shaking 能力
真正的原子化关键不在“有没有类名”，而在“每个类是否单一、静态、可预测”。试图用 CSS 变量绕过类名，等于把构建期问题拖进运行时，反而让调试、压缩、主题切换变得更脆弱。工具链读变量生成类，才是兼顾灵活性与工程健壮性的唯一正路。
