bem不解决优先级冲突，而是通过结构消除冲突源头；.button--primary必须与.button共存于同一元素才能生效，单独使用因语义断裂易被覆盖，多个bem类名权重相同（0,1,0），最终生效取决于构建后的层叠顺序。
根本不用“解决”BEM里的CSS优先级冲突——因为BEM本身不制造优先级差异，它靠类名结构消灭冲突源头。所谓“冲突”，90%是类名没写对、加载顺序乱了、或误用了后代选择器。
为什么 .button--primary 单独写无效
浏览器不认孤立的修饰符。.button--primary 必须和 .button 共存于同一元素，否则它只是个无上下文的类，权重虽是 0,1,0，但语义断裂，极易被 .nav .button 这类带父级的选择器压垮。
- 错误写法：
.button--primary { background: blue; }→ HTML里只写class="button--primary"，样式不生效 - 正确写法：
.button.button--primary { background: blue; }或确保 HTML 是class="button button--primary" - 更推荐写法：
.button--primary { background: blue; }+ HTMLclass="button button--primary"，靠共存关系锁定作用域，而非靠选择器拼接提权
多个 BEM 类名权重相同却覆盖错顺序
权重都是 0,1,0，谁赢取决于 CSS 层叠顺序——不是你手写的顺序，而是构建后最终合并进文件的顺序。Webpack 的 @import、Vite 的 main.css 引入顺序、甚至 Sass 编译时的 @use 依赖图，都会影响结果。
- 查 DevTools 的 Styles 面板，被划掉的规则旁标着 “invalid”，点开看 “Matched CSS Rules” 列表，排在最上面且未被划掉的那条才是真生效的
- 禁用所有
@import，改用 JS/TS 中显式import './button/base.css'控制依赖链 - Vite 或 Webpack 项目中，把基础块样式（如
button.css）放在入口 CSS 最前面，修饰类（如button_theme.css）放后面
第三方库（如 Ant Design）样式强行用 !important 怎么办
BEM 不对抗 !important，而是隔离它。你没法删掉 .ant-btn { border-radius: 4px !important }，但能确保它只在你允许的容器内起效。
- 别写
.ant-btn { border-radius: 0 !important }—— 这等于全局污染，且绑死在第三方命名上 - 用 wrapper 包一层：
<div class="my-form__submit-wrapper"><button></button></div>，再写.my-form__submit-wrapper .ant-btn - 配合 CSS Modules 或构建哈希（如
css-loader的modules: true），让.my-form__submit-wrapper编译成唯一类名，物理隔绝
真正容易被忽略的点是：BEM 的 class 名不是用来“赢过别人”的，而是用来声明“这个样式只属于这个块、这个状态”。一旦开始比权重、加 !important、拼后代选择器，就说明语义已经断了——这时候修样式不如先修 HTML 结构和类名共存逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
