老项目CSS变量需避免污染全局，应按模块作用域隔离、命名加前缀防冲突，IE11需静态值前置+var()覆盖，硬编码JS样式须统一抽离并监控。
旧页面里直接往 :root 写变量会污染全局样式
老项目通常没有主题概念，CSS 是平铺直写的。一旦在 :root 里加 --color-primary，所有后续选择器只要用 var(--color-primary) 就会生效——不管它是不是按钮、标题还是表单控件。更麻烦的是，很多老组件（比如 jQuery 插件生成的 DOM）根本没加 class 隔离，结果一个变量改了，整页按钮、边框、文字全变色。
常见错误现象：
- 给
.header加了--text-color，结果p标签也跟着变色（因为没限制作用域） - 第三方插件弹窗的关闭按钮背景错乱（它读到了你定义在
:root的--bg，但本意只给主内容区用）
实操建议：
- 别一股脑塞进
:root，先按模块切分：比如.legacy-page { --legacy-btn-bg: #007bff; } - 老页面改造时，优先在最外层容器加唯一 class（如
data-legacy="true"），再把变量挂到该节点上 - 用
getComputedStyle(el).getPropertyValue('--x')检查目标元素实际读到的值，确认没被更高层覆盖
变量名和旧 CSS 类名/属性名撞车导致覆盖失效
老项目常有 .red、.bg-blue 这类语义模糊的 class，而你新引入的变量叫 --red 或 --bg-blue，JS 动态切换时容易误操作：比如 el.classList.add('red') 和 el.style.setProperty('--red', 'pink') 同时存在，视觉上就打架。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的是属性名冲突：border-color: var(--border-color) 看似合理，但老 CSS 里可能已有 border-color: #ccc !important，变量根本没机会生效。
实操建议：
- 变量命名加前缀，比如
--legacy-btn-border-color，彻底避开现有 class 和属性名 - 检查老 CSS 是否用了
!important，如有，要么删掉，要么在变量声明后补一条同权重规则覆盖 - 避免用变量名模拟 HTML 属性（如
--width、--display），浏览器不会识别，且易和内联 style 混淆
IE11 下 var() 语法被整条丢弃，fallback 不起作用
老页面大概率要兼容 IE11。但 var(--x, #fff) 在 IE 里完全无效——它连 var() 这个函数都不认识，直接跳过整条声明。很多人以为写了 fallback 就安全了，结果 IE 下按钮背景变成透明或继承黑色。
实操建议：
- 必须用“静态值前置 + var() 覆盖”写法：
background: #007bff; background: var(--btn-bg, #007bff); - 别依赖
@supports (color: var(--x))做降级判断——IE11 本身不支持@supports，这段代码它直接忽略，不会进 fallback 分支 - PostCSS 插件（如
postcss-custom-properties）只对构建时已知的静态变量生效；JS 动态 setProperty 的变量，它压根不处理，别指望它兜底 IE
老项目 JS 直接操作 style 属性，绕过变量链
很多旧逻辑是 el.style.backgroundColor = '#007bff' 这种硬编码写法。一旦你引入变量控制颜色，这些 JS 代码就成了“变量黑洞”：它们不读 var(--btn-bg)，也不触发重计算，改了变量值，按钮颜色纹丝不动。
实操建议：
- 搜索全项目
.style.和setAttribute('style',，把硬编码颜色抽成配置项或统一入口函数 - 用
el.style.cssText += 'background-color: var(--btn-bg);'替代直接赋值（注意 IE 下需用cssText兼容写法） - 关键节点加
MutationObserver监听style变化，发现硬编码覆盖时打 warning，推动逐步替换
getComputedStyle 抓取真实渲染值，比盲写 var() 更靠谱。 
