bem无法解决css全局污染问题，因其无作用域机制，同名类名必然冲突；后代选择器和错误修饰符用法会破坏隔离性；需工具链全链路保障才能真正生效。
因为命名规范只是“说明书”，不是“防火墙”——BEM 写得再标准，.card__title 依然会和另一个模块里同名的 .card__title 直接对撞，浏览器不认规范，只认类名字符串是否相同。
为什么 BEM 类名一模一样就会覆盖？
CSS 没有作用域概念，所有样式规则全局扁平加载。两个文件都定义了 .button--primary，后编译/后引入的那个就会生效，和你有没有写 __ 或 -- 完全无关。
- 常见错误现象：
button--primary在登录页是蓝色，在商品页被另一个团队写的同名类改成绿色，上线后没人知道谁动了 - 构建时若未启用 CSS Modules 或未配置哈希（如 Vite 中
css.modules: { generateScopedName: '[name]__[local]___[hash:5]' }），BEM 就只是语义更清楚的全局污染 - JS 仍可直接
document.querySelector('.user-card__avatar')拿到并操作，暴露面没变小
为什么写了 BEM 还在用后代选择器？
只要出现 .search-form .input 或 & .product-card__price（Sass 中的空格写法），就等于主动凿穿 BEM 声称的“隔离墙”。这类选择器不依赖类名前缀，只依赖 DOM 结构，一旦结构微调，样式立刻失效或意外生效。
- 真实场景：改个
<div class="search-form">...</div>为<section></section>，所有.search-form .input全挂 - Sass 中
& .product-card__price编译出带空格的选择器，违反 BEM “唯一类名注入”原则 - Stylelint 必须开
selector-bem-pattern并设为error级别，否则 CI 不拦，人眼几乎无法发现
为什么修饰符挂错位置会让状态逻辑失控？
把 user-card__avatar--large 当作独立状态用，等于把缩放权下放给元素；而真正该响应状态变化的是整个 user-card 区块——比如 user-card--compact 应统一控制内边距、字体、图标尺寸。
- 后果：
user-card__avatar--large和user-card--compact同时存在时，谁赢取决于 CSS 加载顺序，不是命名能决定的 - Modifier 必须与 block 或 element 并列使用，禁止嵌套：
button--primary--loading❌，应为button--primary button--loading✅ - 元素级修饰符不能脱离块存在：
avatar--large违规；user-card__avatar--large合规但需确保user-card根类始终存在
最容易被忽略的是：BEM 的有效性不取决于你写了几个 __，而取决于整个工具链是否堵死了所有绕过它的路径——包括构建配置、CI 检查、IDE 插件补全、甚至代码审查 checklist。漏掉任何一环，它就只是看起来整洁的幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
