在css中定义局部作用域变量以实现组件样式隔离，核心做法是使用 :root 伪类配合 scoped 属性（在 vue/react 等框架的 标签上）或 css modules。对于原生 css，推荐使用 @property 注册自定义属性或使用 :host 选择器结合 shadow dom。这里以最常见的 :root 结合 scoped 样式为例，通过限定选择器范围来避免全局污染。
如何在Vue单文件组件中使用Scoped CSS定义局部变量？
在 Vue 单文件组件中，通过在 标签添加 scoped 属性，并在内部使用 :root 或组件根元素定义 CSS 变量，即可实现该变量仅在当前组件内生效。具体做法是在 :root 下声明变量，然后在子元素中引用，这样变量会被注入到组件的特定命名空间（如 [data-v-xxx]），从而避免与其他组件冲突。
<template><div class="component-root">
<p>颜色是: {{ color }}</p>
</div>
</template><script>
export default {
data() {
return { color: 'var(--theme-color)' };
}
}
</script><style scoped>
:root {
--theme-color: #3498db;
}
.component-root {
color: var(--theme-color);
}
</style>
上述代码中，--theme-color 被定义在 :root 下，但由于 scoped 的存在，实际生成的 CSS 会类似 :root[data-v-abc123] { --theme-color: #3498db; }。当组件渲染时，只有带有对应 data-v-xxx 属性的 DOM 树能访问到这个变量。预期结果是页面文字显示为蓝色 #3498db，且该变量不会影响到其他未包含此组件的页面区域。
如何使用CSS Modules实现更严格的变量隔离？
CSS Modules 通过将 CSS 类名和变量名进行哈希化处理，确保每个组件的样式唯一。在 Webpack 或 Vite 配置启用 CSS Modules 后，可以在 .module.css 文件中定义变量，并通过 JS 对象导入这些变量。这种方式比 scoped 更严格，因为它不仅隔离了选择器，还隔离了变量名的引用路径，彻底杜绝命名冲突。
/* styles.module.css */
:root {
--primary-bg: #f0f0f0;
}
.container {
background-color: var(--primary-bg);
padding: 20px;
}
// Component.js
import styles from './styles.module.css';
function MyComponent() {
return (
<div classname="{styles.container}">
Content
</div>
);
}
在此示例中，styles.primaryBg 实际上并不直接存在，因为 CSS Modules 主要处理类名。对于变量，通常建议直接在 JS 中定义常量，或者利用 CSS 变量的继承特性。若要在 CSS Modules 中完全隔离变量，最佳实践是将变量定义在模块特定的选择器下，例如 .container { --local-var: red; }，然后仅在 .container 及其后代中使用。预期结果是 .container 的背景色为灰色，且 --local-var 不会被其他组件意外覆盖。
当父组件与子组件同时定义同名CSS变量时，哪个值生效？
当父组件与子组件同时定义同名 CSS 变量时，根据 CSS 的层叠规则（Cascading），如果两个变量都作用于同一个元素，后定义的优先级更高；但如果通过 Shadow DOM 或 Scoped 机制隔离，则各自在自己的作用域内生效，互不干扰。在普通的 DOM 结构中，子元素会继承父元素的变量，除非子元素自身重新定义了该变量。因此，若子组件显式覆盖了变量，则子组件内的样式使用子组件的值；否则继承父组件的值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
