题干与适用场景
组件库使用 --accent、--progress 和 --card-size 等自定义属性。设计稿要求它们平滑过渡，但当前变量是无类型字符串，错误值会静默传播，子组件还会意外继承主题值。请说明何时用 CSS @property 注册这些变量，以及如何处理默认值、无效值、继承和浏览器兼容。
这道题适合前端、设计系统和 Web 性能岗位。重点是理解 CSS Properties and Values API 的约束边界，而不是把所有变量都注册一遍。回答应覆盖语法、初始值、继承、动画插值、作用域、渐进增强和测试。
面试官考察点
强回答会指出普通自定义属性按字符串计算，默认继承；注册属性可以声明类型、初始值和继承行为，浏览器在计算阶段校验无效值。它会说明 syntax 与 inherits 是必需描述符，非通配语法通常需要计算独立的 initial-value，并判断动画、类型约束和非继承组件变量等实际收益。还要避免把 @property 当成 JavaScript 状态或性能保证。
回答前需要澄清的问题
- 变量承载什么类型：颜色、长度、角度、数字，还是任意 token 字符串？
- 它是否需要平滑动画，还是只在主题切换时离散替换？
- 值应否继承到子组件，组件边界是否需要隔离？
- 无效值出现时应回退到初始值、祖先值，还是让声明失效？
- 目标浏览器、服务端渲染、旧版降级和设计 token 发布流程是什么？
30 秒回答框架
“普通自定义属性是可继承的字符串，适合开放式 token；需要类型校验、非继承默认值或平滑动画时，我会用 @property 注册。注册时明确 syntax、inherits 和计算独立的 initial-value，让无效赋值回到可预测的初始值。对旧浏览器保留普通变量作为降级，并用组件级测试验证继承、无效值、动画和主题切换，而不是假设注册本身一定更快。”
分步骤深入解答
第一步：区分普通变量与注册属性
普通 --name 变量参与级联并默认继承，浏览器把值当作 token 序列处理。它适合颜色 token、间距字符串或需要自由组合的值，但浏览器无法知道你期望的是颜色还是长度。@property 为同一个变量增加类型、继承和默认值元数据。
第二步：选择明确的 syntax
只为需要约束或插值的变量注册类型。例如颜色、数字和角度分别使用对应的 CSS 类型语法。避免为了“更严格”把需要多个 token 的复杂变量误声明成单一类型，导致合法主题值被丢弃。
第三步：设置 inherits 和 initial-value
inherits 必须明确。主题色通常需要继承，组件内部的局部尺寸或动画进度可能应设为不继承。非通配语法需要计算独立的 initial-value，例如长度用固定单位而不是依赖父级的百分比。缺少必需描述符会让整条注册规则无效。
第四步：理解无效值和回退
注册属性在计算时校验值。与类型不符的赋值不会生效，属性会回到注册的初始值、继承值或级联中的其他有效结果，具体取决于 inherits 和声明位置。全局关键字 initial、inherit、unset 和 revert 仍有特殊语义，不能把它们当成普通字符串测试。
第五步：利用可插值动画
未注册的自定义属性通常只能离散变化，浏览器无法对任意字符串计算中间值。注册为颜色、长度或数字后，浏览器知道如何插值，可以驱动渐变、进度和旋转动画。仍需测试动画时长、合成层、减少动效偏好和大量元素更新的实际成本。
第六步：控制组件边界
把全局主题 token 与组件内部状态分开命名。继承值适合主题向下传递；不继承的属性让组件使用自己的初始值，避免父级同名变量污染内部动画。若变量需要跨 shadow DOM 或容器共享，先明确命名空间和暴露 API，再决定是否注册。
第七步：提供渐进增强
先提供普通自定义属性和静态终态，让不支持 @property 的浏览器仍能渲染可用 UI；支持注册的环境再获得类型约束和插值动画。不要在关键布局上只依赖注册属性，必要时用 @supports (property: --x) 或脚本能力检测选择增强路径。
第八步：验证错误与浏览器行为
测试合法值、错误类型、缺失初始值、继承开关、主题覆盖、动画中途改值和 SSR 首屏。检查旧浏览器、开发者工具计算值和视觉回归。MDN 提醒注册属性在计算阶段校验，错误声明可能整条被忽略，因此构建检查和运行时样例都要覆盖。
设计取舍与边界
注册属性会增加声明和设计 token 的维护成本，也可能让不熟悉 CSS API 的贡献者误以为所有值都能自由替换。我会优先注册有明确类型、需要动画或必须阻止继承污染的变量；开放式内容 token 继续使用普通自定义属性。
不要把类型校验当作安全边界或跨浏览器一致性的保证。浏览器支持、解析时机和动画合成仍要以目标矩阵实测；关键可访问性状态应有静态样式和减少动效路径。
落地计划与证据
先挑选一个进度或颜色组件做试点，记录变量用途、类型、继承策略和回退值。用一组合法与非法样例验证计算结果，再比较注册前后的动画流畅度、样式重算和旧浏览器表现。试点通过后，把注册声明、token 文档和视觉回归加入组件库发布检查。
每次修改 syntax 或 inherits 都视为行为变更，检查子组件覆盖、主题切换和持久化快照。若用户报告颜色跳变或尺寸回退，先查看计算值和支持路径，不要只调大动画时长。
常见误区与追问
把所有 CSS 变量都注册
任意 token、复合值和实验性字符串不一定有稳定语法。只注册需要类型、默认值、继承控制或插值的变量。
忘记 initial-value 的计算独立性
非通配语法的初始值不能依赖上下文计算。使用百分比或 em 可能让注册规则无效，应改用计算独立的单位或通配语法并承担更弱约束。
以为 invalid 值会回退到上一个合法声明
注册属性在计算阶段校验，错误赋值可能回到初始值或继承结果，而不是保留相邻的旧值。测试计算后的样式，不能只看源码顺序。
把 inherits 当成 cascade 隔离
inherits: false 只控制默认继承；作者仍可显式写 inherit，组件也可能通过其他 token 接收父级值。边界需要命名、文档和测试共同保证。
如何兼容不支持 @property 的浏览器？
保留普通变量的静态终态和合理默认值，把注册与动画作为增强。对关键内容使用 @supports 或能力检测，并在目标浏览器矩阵上验证首屏、主题与减少动效路径。