css类名冲突源于作用域未隔离，而非命名不规范；scss的&仅是父选择器占位符，编译后仍生成全局类名，无法防止冲突，需依赖css modules或css-in-js实现真正隔离。
CSS类名冲突不是命名不够“规范”导致的，而是作用域没切开——SCSS的&本身不防冲突，它只是帮你写得快，真要隔离得靠构建时模块化或运行时作用域。
为什么&不能解决命名冲突
SCSS里的&只是父选择器占位符，编译后仍生成全局类名。比如：
.card {
&__header { color: #333; }
&--hoverable:hover { background: #f5f5f5; }
}
输出仍是.card__header和.card--hoverable这种全局可被覆盖的类名。一旦两个组件都叫.card，样式就打架——&没做任何哈希、作用域包裹或模块绑定。
常见错误现象：
- 在多个
.module.scss里都用&__title，结果编译后全是Header__title这类重复类名（没启用CSS Modules） - 把
&当作用域开关，以为写了.user-card { &__name { ... } }就能避免和.admin-card__name冲突——其实不能
真正防冲突：必须配合CSS Modules或CSS-in-JS
想让&产出的类名不冲突，得让它跑在局部作用域里。两种主流路径：
-
CSS Modules（推荐）：文件后缀用
.module.scss，Webpack/Vite会自动启用css-loader?modules，&生成的.card__header会被重命名为类似Card_card__header__abc123的唯一名 -
CSS-in-JS（如styled-components）：根本不用
&，直接用组件封装，const CardHeader = styled.div``天然隔离
注意点：
- Vue单文件组件里
<style scoped></style>不处理&嵌套逻辑，只加属性选择器，防不了同名类在不同组件中同时存在 - Umi4或Next.js项目中，若
cssModules: { pattern: '[local]' }，&生成的类名依然裸奔——必须改成[path]_[name]__[local]___[hash:base64:4]
&的正确高阶用法：减少冗余，不制造假安全感
&的价值是写得少、改得快，不是“防冲突”。进阶用法聚焦在结构表达力上：
- 嵌套伪类/伪元素：
&:hover { &__icon { transform: rotate(90deg); } }→ 编译为.button:hover .button__icon - 组合修饰符：
&--primary { &__label { font-weight: bold; } }→.button--primary .button__label - 避免三层以上嵌套：
&__body { &__list { &__item { ... } } }是反模式，应拆成.list独立Block
性能影响：过度嵌套&会导致选择器过长（如.a.b.c.d:hover .a__b .a__b__c），CSS引擎匹配变慢，且压缩工具难优化。
容易被忽略的构建配置细节
很多人开了.module.scss却还是冲突，问题常出在构建层：
- Webpack中
css-loader的modules.mode必须是'local'（默认是'global'） - Vite里
css.modules.generateScopedName若没配，哈希可能太短（如[hash:base64:3]），碰撞概率上升 - PostCSS插件
postcss-modules和css-loader不能共存——后者已内置模块逻辑，多加前者反而破坏getJSON映射
最常漏掉的一点：&生成的类名，在JS中必须通过import styles from './X.module.scss'访问，硬写className="card__header"会失效——模块化不是编译魔法，是JS对象绑定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
