:root定义的css变量在css modules中仍可用，因为css modules仅哈希化类、id和属性选择器，不处理:root等顶层规则；变量沿继承链覆盖，shadow dom需手动传递。
可以直接用，但必须确保变量定义在全局作用域（:root）且未被局部样式覆盖——CSS Modules 不影响 :root 或其他非类选择器的声明，var(--x) 依然能正常解析。
为什么 :root 定义的 CSS 变量在 CSS Modules 中仍可用
CSS Modules 只对类选择器（如 .button）、ID 选择器（#header）和属性选择器（[data-foo]）做哈希化和作用域隔离；它不处理伪类、伪元素或顶层规则（如 :root、@keyframes、@layer）。所以只要变量写在 :root 里，所有模块都能读取。
-
:root { --brand-color: #007bff; }→ 全局可访问，无例外 -
.my-module { --local-only: red; }→ 仅该元素及其后代继承，CSS Modules 不干扰此行为 - 错误写法：
:global(:root) { ... }——:root本就是全局，加:global()多余且无效
如何避免组件内变量覆盖全局值
组件级变量会沿继承链向下覆盖同名全局变量，这是 CSS 机制本身决定的，不是 CSS Modules 的 bug。如果你在某个模块里写了 .card { --brand-color: #ff6b6b; }，那么所有 .card 内部的 var(--brand-color) 就会取这个值，而不是 :root 的。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 检查计算样式时，浏览器开发者工具里「Computed」面板会明确标出变量来源（
:root还是.card） - 想强制回退到全局值？不能靠“重置”，只能避免在局部重复定义同名变量
- 命名建议：全局变量用语义前缀，比如
--g-color-primary，组件变量用--c-button-bg，从源头降低冲突概率
动态更新全局变量时要注意 Shadow DOM 隔离
如果组件用了 Shadow DOM（例如 Web Components 或某些框架封装），:root 定义的变量默认不会穿透进去——Shadow Root 有自己的继承根节点，:root 指的是主文档，不是 Shadow 根。
- 方案一：在 Shadow Root 内手动设置变量，例如
shadowRoot.host.style.setProperty('--brand-color', 'blue') - 方案二：用
:host+ 继承，例如:host { --brand-color: var(--brand-color, #007bff); }，前提是宿主元素本身继承了该变量 - 方案三：通过
inherit显式传递，但仅适用于支持继承的 CSS 属性（颜色、字体等），不适用于所有var()使用场景
真正容易被忽略的是变量作用域和 Shadow DOM 的交叠：你以为改了 :root 就万事大吉，结果发现自定义元素里压根没反应——先看它是不是在 Shadow Root 里，再决定怎么传值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
