css变量必须定义在:root中以确保全局可访问和兼容性；fallback需单位一致且不可嵌套；js修改须用setproperty()作用于document.documentelement；媒体查询不能直接使用变量，但可用其辅助calc()计算。
定义变量必须用 :root，别在 html 或其他选择器里瞎试
很多人一上来就在 html 选择器里写 --color: red，以为等价于 :root——其实不是。:root 是 CSS 规范明确指定的根伪类，优先级高于 html，且保证全局可访问。如果误用 html，某些浏览器（比如旧版 Safari）可能不继承变量到 :before/:after 伪元素，或导致 JS 读取失败。
真正安全的做法只有一条：:root 是唯一该放全局变量的地方。
- ✅ 正确：
:root { --primary: #4a6fa5; } - ❌ 危险：
html { --primary: #4a6fa5; }（兼容性隐患） - ⚠️ 注意：
body、div等选择器里定义的是局部变量，仅对后代生效，别指望它“全局”
var(--name, fallback) 的 fallback 不是摆设，得真能兜底
很多人把 fallback 当成注释写法，比如 var(--text-color, #333)，但没想过：如果 --text-color 被设为 invalid 或空字符串，浏览器会直接跳过变量、启用 fallback。这个机制在主题切换或 JS 动态注入失败时就是救命稻草。
常见踩坑点：
- fallback 不能是另一个
var()，比如var(--color, var(--default))无效，浏览器不支持嵌套 - 数值类变量 fallback 必须单位一致，
var(--size, 14px)合法，但var(--size, 14)在 font-size 场景下会失效（缺少单位） - 颜色 fallback 推荐用十六进制或 rgba()，避免用命名色（如
red），因为部分环境不支持命名色回退
JS 修改 CSS 变量要走 style.setProperty()，别直接改 style 对象
想用 JS 切换主题？别写 document.body.style.--primary = 'red'——这行不通。CSS 变量是自定义属性，必须通过 setProperty() 设置，否则浏览器压根不识别。
正确姿势：
document.documentElement.style.setProperty('--primary', '#2a9d8f');
几个关键细节：
- 修改目标选
document.documentElement（对应:root），不是document.body，否则子元素可能继承不到 - 变量名带两个短横线，必须原样传入字符串，不能漏掉
-- - 批量修改别循环调用
setProperty，先拼好对象再用Object.entries().forEach()，减少重排
响应式断点里用变量要小心 calc() 和媒体查询的配合
CSS 变量本身不能直接用在 @media 查询条件里（比如 @media (min-width: var(--breakpoint-md)) 是非法语法），但你可以用变量辅助计算值，再手动写死断点——这反而更可控。
推荐做法是：把断点值定义为变量，然后在 calc() 或具体样式中使用，比如：
:root { --breakpoint-md: 768px; }<br>@media (min-width: 768px) { .header { padding: calc(var(--breakpoint-md) / 8); } }
这样既保持变量管理，又避开语法限制。容易被忽略的一点是：变量参与 calc() 时，所有单位必须显式声明，var(--gap) 如果没带 px 或 rem，calc(2 * var(--gap)) 会直接失效。
复杂点在于，一旦你开始用 JS 动态改断点变量，媒体查询不会重触发——所以断点变量更适合静态配置，动态适配逻辑建议交给 JS + class 切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
