BEM不能彻底防止样式覆盖，因其仅是命名约定，编译后类名仍全局可见；CSS Modules通过哈希化类名实现天然隔离，是最直接有效的方案。
类名冲突不是命名不规范的问题，而是CSS作用域天然全局导致的——靠改名字只能降低概率，不能根治；真正有效的解法只有隔离：构建时模块化（CSS Modules）、运行时封装（CSS-in-JS）或人为划界（BEM + 前缀）。
为什么 BEM 不能彻底防止样式覆盖
BEM（.block__element--modifier）只是命名约定，编译后仍是全局类名。两个组件都写了 .card__title，且最终打进同一份 CSS 文件里，后定义的规则就会覆盖前一个——和你写没写 __ 没关系。
- 常见错误现象：
.header__logo在 A 组件里是 24px，在 B 组件里被另一个同名类设成 16px，结果全站 logo 变小 - 团队协作时没人敢删旧类，因为不知道哪个页面还依赖它
- JS 仍能用
document.querySelector('.form__input')拿到并修改，暴露面大 - 它对可读性和协作友好，但对样式隔离无实质提升
CSS Modules 是最直接有效的落地方案
Webpack/Vite 默认支持，只需把文件改成 .module.css 或 .module.scss，所有类名自动加哈希，比如 .btn 编译成 Button_btn__Kx2f1，天然隔离。
- 必须用 JS 对象方式绑定：
className={styles.btn}，硬写class="btn"会失效 - 要覆盖第三方组件（如 antd），用
:global(.ant-btn)显式声明局部作用域内的全局选择器 - Vue 单文件组件中，
<style module>和<style scoped>不等价：scoped只加属性选择器，不防同名类在不同组件共存 - Vite 中若配置了
css.modules: { pattern: '[local]' }，但没配哈希规则，&生成的.card__header依然裸奔
当必须用全局类时，BEM 要配合前缀或 ID 限定
纯 BEM 不够，得加一层物理隔离。比如整个应用挂载在 <div id="my-app"> 下，所有自定义样式前面加上 #my-app：
立即学习“前端免费学习笔记（深入）”；
#my-app .header__logo { font-size: 24px; }
#my-app .card__body { padding: 16px; }
- Tailwind 用户可在
tailwind.config.js中设prefix: 'tw-'，让所有类变成tw-text-lg，避免和 Bootstrap 的text-lg冲突 - 禁止用
!important去“赢过”第三方样式——它会让后续调试变成猜谜，且无法解决同权重下的层叠顺序问题 - 不要在 BEM 名里塞动态值，比如
.user-card--size-{{ size }}，会导致 CSS 文件膨胀、缓存失效、调试困难
真正容易被忽略的是构建配置细节：BEM 写得再规范，如果没启用 CSS Modules 或没配对哈希规则，它就只是语义更清楚的全局污染。隔离不是靠人脑记规则，而是靠工具链强制执行。
