CSS变量名泛化（如--color）会引发全局冲突，因其作用域为全局，谁后定义谁生效且DevTools无法溯源；应采用语义化前缀（如--user-card-bg）并在对应类选择器内声明以限定局部作用域。
为什么--color这种变量名一引入就炸
CSS变量是全局作用域，--color、--bg这类泛化名只要在任意地方被声明（哪怕在:root或某个组件的.modal里），就会在整个文档生效。第三方库、同事的样式、甚至你自己的另一个组件都可能定义同名变量——谁后加载谁赢，且 DevTools 里查不到来源。
- 常见错误现象：
.button设了--bg: #007bff，结果所有div背景全变蓝，因为:root { --bg: blue }覆盖了它 -
<style scoped>对--*完全无效：Vue 单文件组件中加scoped，变量照样泄露到全局 - 构建工具（如 Vite）默认不处理变量作用域：
postcss-custom-properties只做值替换，不加命名空间
--button-bg和--user-card-bg哪个更安全
必须选--user-card-bg。前缀不是越短越好，而是要绑定语义边界。
-
--button-bg看似合理，但项目里一旦出现modal-button、form-button、ant-btn，它们都可能想用这个变量，冲突概率极高 -
--user-card-bg把 Block 名直接编码进变量名，天然绑定模块上下文，--header-logo-color比--color安全十倍 - 禁止用泛化词作前缀：
--primary-color不如--navbar-logo-color或--app-primary-color - 修饰符变量要和类名 Modifier 对齐：
user-card--compact对应--user-card-compacted-padding，而非--compact-padding
怎么让--user-card-bg只在.user-card内生效
靠声明位置，不是靠名字。CSS 变量的作用域取决于它在哪声明——:root下是全局，.user-card下就是局部。
- 正确写法：在
.user-card规则里声明变量，而不是扔在:root或单独文件顶部 - 示例：
.user-card { --user-card-bg: #f8f9fa; --user-card-border-radius: 8px; } .user-card__avatar { background-color: var(--user-card-bg); border-radius: var(--user-card-border-radius); } - 避免在
:root声明业务变量：:root { --user-ca...（截断）这类写法会让变量污染整个文档，修改时触发全量重算，性能差 - 别把 JS 状态塞进变量名：
--is-loading是反模式，状态该由user-card--loading类控制，变量只管样式值
Less/SCSS里变量冲突怎么防
Less 和 SCSS 的变量不是运行时机制，编译期就扁平合并、静默覆盖，调试时根本看不出哪处生效。
立即学习“前端免费学习笔记（深入）”；
- Less：所有
@import进来的变量都在同一作用域，后定义者生效但不报错；必须用带业务语义的长变量名+单点收口（如@btn-height），禁用@primary-color这种裸名 - SCSS：
@import是文本拼接，@use才创建命名空间；@use "colors" as c后必须写c.$primary，否则报错；混用@import和@use会导致整链降级为 legacy 模式 - 所有公共变量统一收口到
variables.less或_variables.scss，其他文件只@import不重定义 - 声明必须带分号：
@spacing-xs: 4px;少了;，Less 会跳过该行及之后所有变量声明
--user-card-bg却仍扔在:root里，等于白起名。 
