用了八年设计系统，今天 CSS 终于把「属性组」这件事原生化了——@property-group 提案把设计系统的账彻底变了

用了八年设计系统，每次改主题都要靠预处理器撑着——今天这个 CSS 提案把属性组的事彻底扒开了。

CSS 变量解决的是「值」的复用：:root { --primary: #0066ff; } 然后 var(--primary) 到处用。但设计系统里真正贵的不是单个值，而是一组属性的组合：一个 card 组件的完整样式（border-radius、padding、background、box-shadow）要复用，Sass 用 @mixin 写了八年，CSS 原生这边一直缺着这一块。

Lea Verou 在 W3C CSS Working Group 提的这个提案叫 CSS Variable Groups，配套实现参考里叫 @property-group。语法是这样的：

@property-group card-base($radius, $padding, $bg) {
  border-radius: $radius;
  padding: $padding;
  background: $bg;
}

.card {
  property-group: card-base(12px, 1.5rem, white);
}

.card-lg {
  property-group: card-base(16px, 2rem, #f5f5f5);
}

这组语法定义了一个可复用的属性组，参数化的 $radius、$padding、$bg 可以在调用时传值。和 Sass @mixin 的工作方式几乎一样——但这是原生 CSS，浏览器直接认识它。

原生 CSS 属性组和 Sass 编译结果本质不同。Sass @mixin 在编译时把所有属性「拍平」进每个选择器里，浏览器拿到的是普通声明，没有「card-base」这个概念，devtools 里只能看到最终结果。原生属性组在 CSS 级联里真实存在，devtools 能看到完整定义，cascade 的优先级顺序正常参与，@layer 的层级规则也适用，浏览器在解析阶段就知道这是一个组合样式——这对构建可靠的设计系统至关重要。

CSS 的设计系统能力这几年确实补了很多：变量存 token、@layer 管优先级、if() 做条件、@function 做计算。但「一组属性的完整封装」一直是空缺的。虽然 @mixin 提案在 2026 进入了 Baseline（Chrome 146 预期，modern-css.com 记录），@apply 的浏览器支持状态还不稳定——MDN 明确写了「CSS mixin 目前在任何浏览器中都不受支持」，hipro.cc 提到的主流浏览器支持可能是指早期实验版本的混用。这个提案的完整实现还需要时间，但它的思路是对的：CSS 需要一个原生机制来封装和复用属性组合，设计系统的工作流才能真正从预处理器里搬出来。

对于这个提案何时能真正落地，我比较保守。CSSWG 的提案从提出到浏览器实现通常要好几年，而 @property-group 目前既没有明确的实现路线图，也没有看到浏览器团队的具体承诺。不过从工具链迁移的角度看，即使只有 @mixin/@apply 先稳定下来，配合现有的变量、条件函数和计算能力，基础的属性组复用需求已经能在一定程度上转移了。

设计系统的下一步应该是：先把 token 级的东西迁到原生 CSS，那些真正复杂的、参数化的属性组可以边走边看这个提案的进展。