BEM本身不防止覆盖，因类名仍全局可见；.user-card__avatar被覆盖是因多处定义同名类，后加载规则生效，需靠构建层校验、白名单和工具链（如stylelint）强制约束才有效。
因为 BEM 本身不阻止冲突，只让冲突变成可定位的结构错误；真正起作用的是构建层校验、白名单约束与作用域声明，不是类名写长了就自动隔离。
为什么写了 .user-card__avatar 还是被覆盖了
BEM 类名不唯一，它只是约定。两个模块都定义了 .user-card__avatar，最终打进同一份 CSS 文件里，后加载的规则就会覆盖前一个——浏览器不认“谁写的”，只看层叠顺序和选择器权重。
- 常见现象：
.user-card__avatar在用户页设为 40px，在后台页被另一个同名类设成 24px，结果全站头像变小 - 团队不敢删旧类，因为没人敢确认哪个页面还依赖它
- JS 仍能用
document.querySelector('.form__input')拿到并改样式，暴露面大
哪些写法看似 BEM 实际等于没用
伪 BEM 是冲突高发区，名字带 __ 或 -- 不代表真隔离，关键看是否满足语义闭环和工具链约束。
-
search-form__input--disabled✅（search-form是真实 block，input是其元素，disabled是状态） -
search-form__input_error❌（单下划线非标准，应为--error） -
button--primary❌（缺少 block 前缀，button不是合法 block 名） -
header__nav-item_active❌（nav-item是另一个组件，不该塞进header的命名空间）
为什么团队写了 BEM 还是天天修样式覆盖
靠人自觉写对没用，必须把约束塞进开发流。90% 的 BEM 失效，是因为没配工具链拦截违规写法。
立即学习“前端免费学习笔记（深入）”；
- 没开
stylelint-selector-bem-pattern，写了.user-card .name也没报错 - 没禁用后代选择器，SCSS 里
.card { &__title { color: #333; } }看似方便，但编译出的是.card__title，而有人手写.card .title就直接破坏封装 - 没配 VS Code 插件实时高亮，
.button__icon--left写成.button-icon--left也发现不了 - CI 阶段没跑 CSS lint，合并 PR 后才发现
.modal__content p这种反模式
真正卡点不在“会不会写”，而在“能不能拦住错误写法”。BEM 的 __ 和 -- 是语法契约，不是风格偏好——所有自动化工具都靠这个结构做正则识别。漏掉一个连字符，整个隔离机制就断了。
