BEM不能彻底防止样式覆盖，因其仅是命名约定，编译后类名仍全局可见；CSS Modules通过哈希隔离类名才是根本解法，需配合构建配置与JS对象绑定使用。
类名冲突不是命名不规范的问题，而是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 和 CSS Modules 结合才是兼顾可读性与安全性的常见实践
在 Button.module.css 里继续用 BEM 风格命名：.button、.button__icon、.button--loading，导入后通过对象解构使用：import styles from './Button.module.css' → className={styles['button--loading']}。
立即学习“前端免费学习笔记（深入）”；
- 这样既保留在源码中可读的结构关系，又确保运行时不会被外部样式干扰
- BEM 修饰符中的双连字符
--在 JS 对象属性中需加引号，否则语法报错 - 禁止在 JSX 中硬编码哈希后的类名（如
className="_button_abc123"），那等于放弃 CSS Modules 的可维护性 - 最常被忽略的一点：BEM 的
__和--是人为约定，而 CSS Modules 的哈希是机器生成——前者靠人守规矩，后者靠工具兜底
真正容易被忽略的是构建配置细节：BEM 写得再规范，如果没启用 CSS Modules 或没配对哈希规则，它就只是语义更清楚的全局污染。
