用BEM命名或CSS Modules/CSS-in-JS实现样式隔离。BEM通过block__element--modifier添加作用域前缀；CSS Modules自动编译为唯一类名，避免全局冲突。
class 名重复导致样式覆盖怎么办
不同模块或团队写的 CSS 用同一个 button、header 这类通用名，浏览器按加载顺序或权重规则覆盖样式，后加载的生效——你改了自己模块的 .btn，结果登录页按钮变样了，就是这个原因。
- 别依赖“我先写就该我生效”，CSS 没加载顺序保障，尤其用 Webpack 动态 import 或 CSS-in-JS 时更难预测
- 避免用纯语义名（如
.user、.list），它们在大型项目里几乎必然冲突 - 检查冲突最直接的方式是 Chrome DevTools 里看 Elements 面板：同个元素上多个
.btn样式被划掉，说明被其他同名 class 覆盖了
BEM 命名能解决大部分冲突
BEM（Block__Element--Modifier）不是银弹，但它是目前最易落地、无需工具链改造就能见效的命名策略。核心是让 class 名自带作用域前缀。
-
block是独立组件名，比如search-form；block__element描述内部结构，如search-form__input；block--modifier表示状态，如search-form--expanded - 不推荐嵌套过深：
search-form__input__icon是错的，应为search-form__icon（icon 是 form 的元素，不是 input 的元素） - 和 SCSS 结合时，用
&__input写法可避免手误拼错，也方便全局搜索整个 block 的所有样式
CSS Modules 或 CSS-in-JS 提供真正作用域隔离
如果项目已用 Webpack/Vite，css-modules 是成本最低的自动作用域方案；React/Vue 项目用 CSS-in-JS（如 styled-components、emotion、vue-style-scoped）则连 class 名都不用操心。
- 启用 CSS Modules 后，
.button会被编译成类似Button_button__aBc12的唯一名，完全不冲突 - 注意：CSS Modules 默认只作用于本地文件，
:global(.btn)可以穿透，但滥用会退回命名冲突的老路 - 服务端渲染（SSR）项目要确保构建时生成的 class 名前后端一致，否则 hydration 会失败，常见错误是
Warning: Prop `className` did not match
第三方库样式怎么不被你的 class 影响
像 Ant Design、Element Plus 这类 UI 库自带完整 class 命名空间（.ant-btn、.el-button），本不该被你写的 .button 干扰——但如果你用了通配符或高权重选择器，就可能意外污染。
立即学习“前端免费学习笔记（深入）”；
- 禁止写
* { margin: 0 }或button { color: red }这类全局重置，它们会直接命中第三方组件的原生button标签 - 想定制 UI 库样式？用它官方支持的方式：Ant Design 推荐改
@primary-color变量；Element Plus 提供el-namespace配置；不要直接覆盖它的 class - 实在要局部覆盖，用更高特异性：给容器加自定义 class，再写
.my-page .el-button，而不是单独写.el-button
命名规范能防 80% 的冲突，但真正在意样式隔离，就得靠构建时的作用域处理。很多人卡在“觉得 BEM 太啰嗦”就跳过，结果后期花十倍时间 debug 样式覆盖问题——那个下划线和两个短横线，真不是为了好看。
