removeProperty 无法删除 :root 中定义的 CSS 变量，因其仅作用于 element.style 设置的内联样式，而 :root 变量属于 CSS 规则层；要使其“失效”，应设为非法值（如 'invalid-color'）以触发 var() 的 fallback。
removeProperty 不能删 :root 里定义的变量
因为 removeProperty 只能删除通过 element.style.setProperty 写入的内联样式级变量，而 :root 中声明的变量属于 CSS 规则（stylesheet）的一部分，不是元素的 style 属性值。JS 没有 API 能直接修改或删除 CSS 文件里的声明。
-
document.documentElement.style.removeProperty('--color-bg')不会生效——它只清空你用setProperty动态写进去的那条，对:root { --color-bg: #fff; }这种静态定义毫无影响 - 想“删除”效果，实际只能覆盖为一个无意义值，比如
transparent、initial或空字符串''（但注意：某些属性如color遇到空字符串会 fallback 到继承值，行为不可控） - 如果变量被多个地方引用，覆盖比删除更安全；强行“删掉”反而可能让依赖它的
var(--x, fallback)立即退回到 fallback，导致视觉跳变
document.documentElement.style.cssText = '' 会清空所有内联样式
这是新手最常踩的坑。用 cssText 赋值会整个替换 style 属性，把之前所有通过 setProperty 设置的变量、以及手动加的 style="..." 全部干掉。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
document.documentElement.style.cssText = '--bg-color: #000'; - 正确做法：始终用
setProperty单独设置，哪怕要批量更新，也遍历调用，不拼接字符串 - 额外风险：手拼
cssText容易引入 XSS（比如变量来自用户输入却没转义），也容易因引号/分号缺失导致语法错误
如何让某个 CSS 变量“失效”并触发 fallback
真正需要“删除”的场景，往往其实是希望 var(--x, blue) 中的 blue 生效。这时应确保变量值非法，CSS 引擎才会忽略它并使用 fallback。
- 设成无效颜色：
setProperty('--text-color', 'invalid-color')—— 浏览器识别不了，就走 fallback - 设成空字符串：
setProperty('--gap', '')—— 对margin: var(--gap)会变成margin: ;，非法，触发 fallback（但对calc(var(--gap) * 1px)会报错，需谨慎） - 避免设成
unset或revert：它们是 CSS 关键字，不是变量值，setProperty传进去只是普通字符串，不会触发特殊语义
变量本身无法真正删除，能控制的只有它的值和是否合法。别纠结“删”，重点是让它不参与计算——覆盖、设无效、靠 fallback，这三者才是实际可用的路径。
