CSS变量不能直接写入normalize.css或reset.css中生效，因为这类文件无选择器包裹，变量声明不在:root等作用域内，浏览器会忽略；正确做法是先在:root中定义变量，再在独立文件中用var()覆盖重置规则。
不能直接把 CSS 变量写进 normalize.css 或 reset.css 文件里生效。 因为这类重置文件本身不声明 :root，也不带变量作用域，硬塞进去的 --xxx 会被浏览器忽略——它们只是普通属性名，不是合法的自定义属性声明位置。
为什么 normalize.css 里写 --color 不起作用
normalize.css 是纯规则集合，没有选择器包裹变量声明。比如你改它源码加一行 --text-color: #333;，这行既不在 :root 里，也不在任何选择器内，CSS 引擎直接跳过，不报错也不解析。更关键的是：重置文件本意是“归一化默认样式”，不是提供可变值的接口。
- 变量必须声明在选择器作用域内，最常用且语义正确的是
:root - normalize.css 加载时机早于你的变量定义时，
var(--xxx)会 fallback 到初始值（比如color: var(--text-color, inherit)→ 实际变成inherit） - 部分构建工具（如 Vite、Webpack）会对
@import的重置文件做 inline 处理，导致变量定义被拆散或顺序错乱
正确做法：用 :root + 重置规则分层覆盖
把变量定义和重置逻辑拆开，用 CSS 层叠关系替代“注入”思维。核心是：先定义变量，再用变量重写重置规则中关心的属性。
- 在独立的
variables.css中只放:root块，例如：:root { --reset-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --reset-line-height: 1.5; --reset-color: #333; } - 在另一个
reset-with-vars.css中，导入或紧接其后写覆盖规则：/* 覆盖 normalize 默认字体 */ body { font-family: var(--reset-font-family); line-height: var(--reset-line-height); color: var(--reset-color); } /* 重置 button 默认样式时复用变量 */ button { font-family: var(--reset-font-family); line-height: var(--reset-line-height); } - 确保 HTML 中
<link>顺序为：variables.css→reset-with-vars.css→ 主样式，避免变量未定义
JS 动态注入变量到重置链的坑
有人想用 JS 在 <head> 里提前 setProperty，指望影响后续重置规则——这不可靠。原因很实在：
立即学习“前端免费学习笔记（深入）”；
-
document.documentElement.style.setProperty()只影响style属性，对<link>加载的外部 CSS 无级联效果 - normalize.css 里的规则权重是 0-0-0-1（元素选择器），而
:root变量需通过var()显式调用才能参与计算，JS 设置的变量不会自动“填充”进已解析的重置规则 - 若重置文件用了
@import，且被构建工具转成内联，JS 注入时机可能晚于 CSS 解析完成，变量取不到
真正可控的方式只有两种：一是把变量定义和重置覆盖写在同一个 CSS 文件里，靠 :root + 后续规则顺序保证；二是用构建时预处理（如 PostCSS 插件）把变量值硬编译进重置规则——但这就脱离了 CSS 变量“运行时可变”的本意。别试图让重置文件自己懂变量，让它老老实实被变量驱动就行。
