css变量必须定义在:root层级才能被媒体查询动态更新并全局生效，嵌套定义会导致响应式失效、布局偏移和渲染错乱；命名需带环境语义，calc()计算应统一置于:root顶层。
为什么CSS变量定义位置会影响Lighthouse性能分
CSS变量本身不增加体积，但定义位置不当会直接导致样式重复、解析冗余或媒体查询失效，进而拉低LCP和CLS。最典型的问题是：把变量写在深层选择器里（如.card { --gap: 1rem; }），再试图在:root的@media中覆盖它——这根本不会生效，浏览器只能回退到硬编码值或初始值，最终触发布局偏移或字体重排。
必须把所有响应式变量定义在:root层级
只有:root中的变量才能被全局访问和动态更新，这是CSS变量响应式的基础前提。任何嵌套层级的定义都属于“局部作用域”，无法被媒体查询跨层修改。
-
:root里定义--font-size-base: 1rem，然后在@media (min-width: 768px)里改它，所有引用var(--font-size-base)的元素都会同步更新 - 如果写成
.header { --font-size-base: 1.25rem; }，那@media块里对:root的修改对.header完全无效 - 避免在组件级CSS模块（如
Button.module.css）里定义断点变量——它们会被打包进局部scope，失去响应能力
媒体查询内部不能用calc()计算变量值（Safari 14.5前兼容性陷阱）
旧版Safari对@media块内calc()调用变量的支持不完整，比如--spacing-lg: calc(var(--spacing-sm) * 2)放在媒体查询里，可能静默失败，导致该变量值为空或initial，最终渲染错乱。
- 安全做法：所有
calc()计算统一放在:root顶层定义，媒体查询只做“赋值”动作 - 例如先在
:root里写--spacing-unit: 0.5rem; --spacing-lg: calc(var(--spacing-unit) * 4);，再在@media里只改--spacing-unit - 验证方式：打开Safari 14.4或更低版本模拟器，检查对应元素是否应用了预期样式
动态主题 + 响应式叠加时，变量命名必须带上下文
当深色模式和断点同时存在（比如@media (prefers-color-scheme: dark) and (min-width: 1024px)），若变量名没区分场景，容易互相覆盖或遗漏。
- 错误命名：
--bg-color→ 深色模式下改了它，但中屏设备仍沿用旧值 - 推荐命名：
--bg-color-light-md、--bg-color-dark-lg，让变量名自带环境语义 - 避免用
!important强行覆盖变量——它会让后续所有基于该变量的声明失效，且破坏CSS级联逻辑
真正卡住优化进度的，往往不是变量怎么写，而是它在哪写、被谁读、在什么条件下更新。一个没被:root托管的变量，再精巧的clamp()也救不回LCP。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
