BEM类名冲突本质是CSS层叠顺序问题，需通过构建工具控制CSS加载顺序而非依赖!important或改名；应显式声明依赖、禁用@import、按语义分层引入，并优先使用CSS变量覆盖第三方样式。
直接改类名或加 !important 不解决 BEM 下的多类名冲突，它只会让层叠顺序更难预测、调试更耗时。真正可控的做法是明确每个类名在 CSS 层叠中的位置，并用构建工具约束输出顺序。
为什么 .button--primary 覆盖不了 .button__text？
这不是 BEM 写错了，而是 CSS 层叠规则在起作用：两个类名权重相同（都是 0,1,0），谁在 CSS 文件里定义得靠后，谁生效。但你很难凭肉眼判断 .button__text 是来自 button.css 还是 typography.css，尤其当项目用了 @import 或多个构建入口时。
- 浏览器 DevTools 的 Styles 面板里，被划掉的规则旁标着 “invalid”，说明它被同权重但后出现的规则覆盖了
- 如果
.button--primary和.button__text在不同文件中，且构建时没控制合并顺序，结果就是随机赢 - 用 Sass/Less 嵌套写的
.button { &__text { } }编译后仍是扁平类名，不改变层叠优先级
如何用构建工具固定 BEM 类名的层叠顺序
关键不是“谁写得更狠”，而是“谁先加载”。Webpack、Vite、Rollup 都支持按依赖图或显式配置控制 CSS 输出顺序。
- 禁用 CSS 原生
@import，全部改用 JS/TS 中import './button/base.css'显式声明依赖 - 在 Webpack 中启用
css-loader的modules: true后，BEM 类名仍保留语义（如button__text），但哈希后缀由构建统一管理，避免手写冲突 - Vite 项目中，把基础样式（
button.css）放在main.css最前面，主题/尺寸等修饰类（button_theme.css）放后面——这样.button--large才能稳稳覆盖.button的默认宽高 - PostCSS 用户可加
postcss-import插件，配合dependency-graph分析实际引入路径，避免循环或错序
遇到第三方组件库时怎么避免修饰符失效
第三方库（比如 Ant Design）的 .ant-btn 类名不会遵循你的 BEM 规则，但它内部的修饰符（如 .ant-btn-primary）仍受层叠影响。如果你写了 .my-button--primary 却没生效，大概率是它的 CSS 文件注入得太晚，或者用了 !important。
- 不要试图重写
.ant-btn--primary，它根本不存在；正确做法是在 wrapper 上加 BEM block： - 然后用属性选择器限定作用域：
.form-action-bar .ant-btn-primary { background: var(--brand-color); }，而不是靠权重硬拼 - 若必须局部覆盖，Vue 中用
:deep(.ant-btn)，React 中用styled-components的& .ant-btn，确保样式只作用于当前组件 DOM 树内 - 检查第三方库文档是否提供 CSS 变量（如
--ant-primary-color），优先用变量覆盖，比写选择器更稳定
BEM 本身不控制层叠顺序，它只负责让类名可读、可追溯。一旦涉及多个 CSS 文件、动态注入、第三方样式，层叠就变成构建流程问题，不是命名规范能兜底的。最容易被忽略的是：你以为改了 button--large 就完事，其实它可能被 legacy-reset.css 里一条 button { font-size: 1rem !important; } 拦腰截断——查 Styles 面板前，别急着改类名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
