CSS 变量未定义导致 border 样式解析异常的解决方案

当 css 中使用未定义的自定义属性（如 `var(–dao-pure-white)`）时，浏览器在通过 `cssstylesheet.cssrules` 读取规则时会降级处理 `border` 简写声明，导致各方向的 `border-*` 展开属性值为空，仅保留显式设置的 `border-bottom-color`。根本原因是 css 变量作用域缺失或未初始化。

在现代浏览器（chrome 109+、firefox 108+）中，CSSStyleSheet.cssRules 对 CSS 规则的解析严格遵循 CSS 属性计算与继承规范。当你书写如下样式：

若 —red 和 –dao-pure-white 未在任何作用域中定义（例如未在 :root 或父元素上声明），浏览器在解析 border 简写时将无法计算出有效的 color 值。此时，CSS 引擎会将该简写“部分失效”：border-width 和 border-style 仍可推导（因 1px solid 是字面量），但所有 border-*-color（包括 border-top-color、border-right-color 等）均被置为空字符串（””），最终 cssText 输出中表现为：

.dao-tabs__nav-item--active {   border-top-color: ;   border-top-style: ;   border-top-width: ;   /* ... 其他空值 */   border-bottom-color: var(--dao-pure-white); }

⚠️ 注意：这不是 bug，而是符合 CSS Cascading and Inheritance Level 5 的规范行为——无效的 var() 在计算值阶段被替换为其 fallback（若未提供则为初始值），而 border-color 的初始值是 currentcolor；但当 var(–red) 本身完全未定义且无 fallback 时，整个 border 简写中的 color 分量被视为 invalid at computed-value time，从而导致各方向颜色属性无法可靠展开。

✅ 正确做法是确保所有自定义属性在作用域内明确定义。推荐在 :root 中统一声明全局变量：

立即学习“前端免费学习笔记（深入）”；

:root {   --red: #e74c3c;   --dao-pure-white: #ffffff; }  .dao-tabs__nav-item--active {   border: 1px solid var(--red);   border-bottom-color: var(--dao-pure-white); }

此时，document.getElementById(‘style’).sheet.cssRules[0].cssText 将正确输出：

.dao-tabs__nav-item--active {   border-width: 1px;   border-style: solid;   border-top-color: #e74c3c;   border-right-color: #e74c3c;   border-bottom-color: #ffffff;   border-left-color: #e74c3c; }

? 补充建议：

• 始终为 var() 提供 fallback（如 var(–red, #f00)），增强健壮性；
• 避免在 border 简写中混用变量与字面量（如 border: 1px solid var(–red)），改用分项声明（border-width, border-style, border-color）更利于调试；
• 使用 getComputedStyle(element).borderTopColor 等 API 获取运行时计算值，比依赖 cssRules.cssText 更可靠。

总结：CSS 变量必须先定义、再使用；未定义的 var() 会导致简写属性（尤其是 border、background、font 等复合属性）在 CSSRule 解析中出现不可预测的降级行为。规范化变量声明是保障样式可维护性与 js 操作一致性的前提。