.button--primary单独失效，因其必须与.button共存于同一元素才能生效；脱离块的修饰符语义断裂、权重低，易被更具体选择器覆盖。
为什么 .button--primary 单独写就失效
浏览器不认修饰符独立存在，.button--primary 必须和 .button 共存于同一元素的 class 属性中，否则它只是个孤立类名，权重低、语义断、极易被 .modal .button 这类组合选择器覆盖。
常见错误现象：DevTools 里看到 .button--primary 的样式被划掉，点开发现是第三方 CSS 中的 .ant-btn-primary 或 body .form button 在起作用。
-
.button.button--primary { color: blue; }是安全写法，权重翻倍且语义完整 - HTML 必须写成
<button class="button button--primary"></button>，缺一不可 - 禁止在 JS 中只动态添加
button--primary而漏掉基础类button
多个 Modifier 同时生效却互相覆盖怎么办
不是 BEM 不支持叠加，而是你让不同语义的 Modifier 修改了同一属性。比如 .button--primary 设 background，.button--outline 也设 background，后声明的必然赢——CSS 层叠规则没变，BEM 只管命名，不管逻辑冲突。
使用场景：按钮同时有主题色和边框变体，应确保它们不竞争同一属性。
立即学习“前端免费学习笔记（深入）”；
- 把视觉属性拆开：让
--primary控制background和color，--outline只改border和background为transparent - 避免
.button--primary--outline这种嵌套写法（BEM 明确禁止），改用空格分隔：class="button button--primary button--outline" - Modifier 之间无先后依赖，CSS 声明顺序决定最终值，建议按语义稳定性排序（状态类如
--disabled放最后）
DevTools 显示 .card__title--large 被划掉，但 HTML 没问题
大概率是全局通配规则在作祟，比如第三方主题包里的 .theme-dark * { color: #666 !important; } 或 body .card .title { font-size: 14px; }。这不是 BEM 失效，是你没拦住泛化选择器。
性能与兼容性影响：这类规则匹配成本高（* 和深度嵌套都会拖慢 CSSOM 构建），且无法被单类名选择器有效对抗。
- 禁用所有含
*、body、div开头的全局规则，尤其来自node_modules的主题包 - 用 DevTools 的 “Computed” 面板点开被划掉的属性 → 右键 “Reveal in Sources” 直接定位冲突源文件
- 不要加补救式
!important，它会污染后续所有 Modifier 的覆盖逻辑（比如.card__title--small就再也调不回字号）
构建时多个模块共用 .header__title 导致后加载的覆盖前加载的
BEM 的隔离靠的是语义边界，不是自动加前缀。如果两个不同模块都输出了 .header__title 并打进同一个 CSS 文件，后打包的必然覆盖先打包的——这不是命名问题，是构建时域没切开。
容易踩的坑：以为“名字带双下划线就是 BEM”，结果多个团队各写各的 .header__title，上线后样式随机漂移。
- 优先启用
css-loader的modules: true，让.header__title编译成类似_header__title_3k9x的唯一哈希名 - 若必须用全局 CSS，收敛 block 名：把通用
.header拆成.site-header、.user-profile-header等明确上下文的名称 - 禁止在 JS 模板字符串里手拼 BEM 类名（如
`header__title ${isLarge ? 'header__title--large' : ''}`），改用工具函数或类名工具库（如clsx）防错
复杂点在于：BEM 解决不了别人写的 * { all: unset; }，也防不住构建时未隔离的同名类。真正有效的隔离，永远发生在构建阶段或 DOM 结构层，而不是靠多写几个连字符。
