必须用:root声明css全局变量，因其是浏览器唯一认可的覆盖整个文档树的全局作用域锚点，确保变量在所有后代选择器（含伪元素）中可解析，且在ssr和动态主题切换中稳定可靠。
用 :root 声明全局变量，但按模块分组命名
直接在 :root 里堆一堆 --color-primary、--spacing-sm 看似简单，实际一到换主题或改断点就满屏搜替换。真正可维护的做法是：所有变量仍挂 :root，但用模块前缀强制分类，比如 --theme-color-primary、--layout-gap-section、--typography-line-height-body。
这样做的好处是：var(--theme-*) 和 var(--layout-*) 语义清晰，IDE 能自动补全，搜索时也能精准过滤；更重要的是，后续加暗色模式或响应式变量时，不会和已有变量混在一起。
- 避免无前缀变量（如
--primary）——团队协作中极易被不同人重复定义 - 不推荐用嵌套 CSS 变量（如
--theme: var(--color-primary)）——无法被 JS 读取，且调试时看不到计算值 - 变量值尽量保持原子性，例如
--spacing-unit: 4px，再由--spacing-md: calc(var(--spacing-unit) * 2)推导，而非直接写死--spacing-md: 8px
@layer + :where() 隔离模块变量作用域
CSS 变量默认是全局的，但某些模块需要“局部覆盖”能力，比如一个卡片组件想临时调大内边距，又不想影响其他区域。这时不能靠 JS 动态设 style，而应结合现代 CSS 层叠控制能力。
做法是：在模块根元素上用 style 设置模块专属变量，并用 :where() 限定作用范围：
<article class="card" style="--card-padding: 24px; --card-radius: 12px;"><h3>标题</h3> </article>
然后在对应样式中：
:where(.card) {
padding: var(--card-padding, 16px);
border-radius: var(--card-radius, 8px);
}
-
:where()不增加选择器优先级，避免意外压过其他规则 - 变量带默认值（
var(--card-padding, 16px)）保证降级可用 - 配合
@layer card { ... }可进一步确保该模块样式不被后续@layer utilities覆盖
Sass/SCSS 中用 @use + @forward 拆分变量文件
如果你项目用 Sass，别再用 @import 拉一堆 _variables.scss。它会让变量互相污染，编译后还可能重复输出。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
正确路径是：每个模块变量单独成文件，通过 @use 显式导入，再用 @forward 统一出口：
// src/styles/variables/_theme.scss $theme-primary: #007bff !default; $theme-secondary: #6c757d !default;
// src/styles/variables/_spacing.scss $spacing-unit: 4px !default; $spacing-sm: $spacing-unit * 2 !default;
// src/styles/variables/index.scss @forward "theme" as theme-*; @forward "spacing" as spacing-*;
在组件样式中：
@use "src/styles/variables" as v;
<p>.button {
background-color: v.$theme-primary;
padding: v.$spacing-sm;
}
</p>
-
@use后变量必须带命名空间，杜绝隐式覆盖 -
!default允许上层文件覆盖默认值，适合主题定制场景 - 不要在
.module.css里@use—— CSS Modules 不支持 Sass 指令，这类逻辑只存在于构建前的 Sass 层
JS 动态读写模块变量时，注意作用域与时机
有些交互需要 JS 读取或修改某个模块的变量，比如根据容器宽度切换 --layout-columns。这时候容易踩两个坑：
- 直接
getComputedStyle(document.documentElement).getPropertyValue('--layout-columns')读的是:root的值，不是模块元素上的局部值 - 在 DOM 渲染完成前就读取，返回空字符串
正确方式是：对目标模块元素调用 getComputedStyle，并确保在 requestAnimationFrame 或 ResizeObserver 回调中执行：
const card = document.querySelector('.card');
const style = getComputedStyle(card);
console.log(style.getPropertyValue('--card-padding')); // 读取该元素设置的值
如果要批量更新多个模块变量，别逐个 element.style.setProperty，改用 CSSStyleSheet.insertRule 注入新规则块，性能更可控。
最常被忽略的一点：CSS 变量名大小写敏感，--Card-Padding 和 --card-padding 是两个变量；而 JS 里 setProperty 的第一个参数必须完全匹配，拼错就静默失败，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
