CSS变量命名冲突需通过语义化前缀（如--btn-primary-bg）和作用域限定（在.block中声明）解决，避免泛用名--color等导致全局覆盖。
CSS变量本身不会“污染”，但命名不当会让它变成全局冲突源。真正要防的不是变量泄漏，而是--color、--size这种泛用名被不同模块反复覆盖，导致样式行为不可预测。
为什么--primary比--color更安全？
浏览器对CSS变量不做校验，只认名字。两个组件都定义:root { --color: red; }，后加载的会覆盖前一个——你根本不知道谁赢了。
- 用语义前缀明确归属：
--btn-primary-bg、--card-header-padding，而不是--bg或--padding - 项目级变量统一走
--app-前缀，比如--app-primary-color，和第三方库（如--ant-）天然隔离 - 避免单字缩写：
--w不如--width-base，后者在DevTools里一眼能定位用途
:root里定义变量时，哪些地方容易踩坑？
:root是全局作用域，但不等于“随便写”。很多团队误以为只要加了--就万事大吉，结果上线后按钮颜色突然变蓝——其实是另一个模块悄悄重写了--primary。
- 不要在
:root里直接写业务值，比如--header-height: 64px；应拆成--space-lg: 16px+calc(var(--space-lg) * 4) - 所有
:root变量必须集中管理，禁止散落在各个CSS文件里；推荐建variables.css单文件 - 引入第三方UI库（如Ant Design）前，先检查它的变量前缀，用
@supports (--var: 0)做降级兜底，别指望它自动兼容你的--color
局部变量怎么用才真“局部”？
很多人以为在组件选择器里定义变量就是局部的，其实只要DOM结构嵌套，子元素照样能继承——关键不在“在哪定义”，而在“是否被意外继承”。
立即学习“前端免费学习笔记（深入）”；
- 给组件加明确作用域边界：
.user-card { --user-card-bg: #fff; }，然后子元素用var(--user-card-bg)，别偷懒写var(--bg) - 禁止跨块复用变量名：
.search-form和.filter-panel都用--input-border，等于主动放弃隔离 - Modifier状态要带块名：
.search-form--compact { --search-form-spacing: 8px; }，而不是--spacing
最常被忽略的一点：CSS变量没有“模块作用域”概念，import或@use不改变变量可见性。你写的--text-sm，哪怕只在typography.css里出现，也会在整个页面生效——命名即契约，别指望工具替你守门。
