CSS变量需在目标元素或其祖先上声明并通过var()调用才生效，作用域由声明位置决定；应使用唯一前缀命名、集中管理、避免全局污染，并注意IE兼容性及JS动态修改的性能影响。
如何让CSS变量只在某个模块生效
CSS变量默认是全局的，但可以通过作用域限定让它只影响特定模块。关键不是“定义在哪”，而是“用在哪”——变量必须在目标元素或其祖先上声明，且后代选择器才能继承它。
常见错误现象：:root里定义所有变量，结果整个页面配色被意外覆盖；或者在组件内部用div { --color-primary: red; }，但子元素没加color: var(--color-primary);，以为“设了就自动生效”。
- 变量声明位置决定作用域：写在
.card选择器里，就只对.card及其后代有效 - 必须配合
var()使用才起效，变量本身不触发样式变化 - 避免在
:root中预设过多模块专用变量，否则容易污染和误用
为什么不能直接用class切换整套配色
靠.theme-dark { --bg: #111; --text: #eee; }这类写法看似简洁，但一旦多个模块共用同一组变量名（比如都用--bg），就会互相干扰。一个模块切主题，另一个也跟着变。
使用场景：独立可复用的UI组件（如.modal、.dashboard-card），需要自带配色逻辑，不依赖外部主题上下文。
立即学习“前端免费学习笔记（深入）”；
- 给每个模块加唯一前缀，例如
--card-bg、--modal-bg，而非泛用--bg - 用嵌套选择器限定作用域，比如
.card { --card-bg: #f8f9fa; } .card > * { background-color: var(--card-bg); } - 注意CSS优先级：如果父元素和子元素都声明了同名变量，子元素的声明会覆盖继承来的值
怎样避免变量命名冲突和维护混乱
多人协作或长期迭代时，--primary这种名字极易重复定义、含义模糊。真正的问题不在“能不能用”，而在“别人改了会不会悄悄影响我”。
参数差异：变量名长度和语义粒度直接影响可维护性。短名写得快，但查bug时要翻半天；长名啰嗦，但一眼知道归属和用途。
- 采用
[scope]-[purpose]-[state]格式，例如--button-primary-bg-hover、--header-main-text-active - 模块内统一管理变量，在
:is(.card, .card *)或单独的.card-variables类里集中声明 - 不要把颜色值硬编码进组件样式，始终通过
var(--card-border)引用，方便后期批量调整
兼容性与性能要注意什么
CSS变量在IE中完全不支持，如果项目还要兼容IE，就得用预处理器变量或JS注入fallback。但即使现代浏览器，滥用也会带来隐性成本。
性能影响：变量本身几乎无开销，但频繁在大量元素上重复声明（比如每个.item都写一遍--item-color），会增加CSS解析压力；更严重的是，用JS动态改变量值时，若范围太大，可能触发全页面重绘。
- 静态配色方案尽量用
:root或模块根元素一次性声明，别在每个子元素上重复设 - JS操作变量时，优先改父容器的
style.setProperty，而不是遍历一堆节点 - 用
getComputedStyle(el).getPropertyValue('--my-var')读取时，注意返回的是计算后值，不是原始定义
最易被忽略的一点：变量值不参与CSS层叠计算，var(--x, red)里的red只是fallback，不会像普通属性那样参与优先级比对。这意味着你不能靠它“兜底”样式逻辑，只能靠结构和作用域来保证可靠生效。
