不能给 ant-btn 套 bem 结构，因其类名链和状态逻辑（如 .ant-btn-loading）是 ant design 内部强依赖的封装边界，手动改写为 ant-btn__icon 或 ant-btn--primary 会导致选择器失效、状态失配、升级崩溃；正确做法是用 wrapper block（如 form-actions）包裹，再通过 :deep() 或 .form-actions .ant-btn 局部控制样式。
能共处，但不能混用——Ant Design 的类名是封装边界，BEM 是你自己的组织语言，二者必须分层，不能试图把 ant-btn 改成 button__icon 或加 --primary 修饰符。
为什么不能给 ant-btn 套 BEM 结构
Ant Design 的样式体系依赖固定类名链和内部权重计算，比如 .ant-btn .ant-btn-icon 这种嵌套关系是它 CSS 规则生效的前提。一旦你手动写 ant-btn__icon，CSS 选择器就失效；加 ant-btn--primary 更危险：它既不在 Ant Design 的 JS 状态逻辑里，也不在它的 CSS 文件中，属于“幽灵类名”，调试时找不到来源，升级后直接消失。
- 常见错误现象：
ant-btn--loading在本地有效，上线后按钮不显示加载态——因为 Ant Design 的 loading 行为由loading属性触发，只响应.ant-btn-loading类，不是--loading - Ant Design 的 modifier（如
ant-btn-primary）是原子状态，和 BEM 的--primary语义重叠但实现隔离，强行桥接等于自己维护一套状态映射表 - 它的 class 名生成有动态部分（如
ant-btn-icon-123abc），BEM 工具链无法静态分析或校验
正确做法：用 Block 包一层，再局部控制
把 ant-btn 当作不可拆解的“原子组件”，你在它外部定义自己的 BEM Block，用 wrapper 控制布局、间距、组合逻辑，再通过 :deep() 或属性选择器做必要微调。
- 场景举例：表单内统一右对齐操作按钮 → 写
form-actionsBlock，结构为<div class="form-actions"><button></button></div> - CSS 中用
.form-actions:deep(.ant-btn)（Vue）或.form-actions .ant-btn（普通 CSS）加 margin，不碰.ant-btn内部结构 - 需要覆盖颜色？写
.form-actions:deep(.ant-btn-primary)，而不是试图造个form-actions__btn--primary - 若用 CSS Modules，必须显式声明穿透：
::global(.ant-btn) { margin-right: 8px; }，否则styles['ant-btn']是undefined
类名注入顺序和优先级怎么压得住
Ant Design 的 CSS 通常在入口 import 'antd/dist/reset.css'，它会全局生效且优先级高。如果你的 BEM 样式后加载，但选择器不够强，照样被盖掉。
- 最常被忽略的是 link 标签顺序：确保你的
form-actions.css在reset.css之后引入 - 避免靠
!important解决，改用 specificity 提升，比如.form-actions .ant-btn比.ant-btn多一级，通常就够 - 在微前端场景下，子应用的样式可能被主应用 reset 覆盖，这时得用
[data-app="form"] .form-actions .ant-btn加命名空间锚点 - 检查 DevTools 中 Computed Styles 面板，确认最终生效的 rule 来自哪个文件，别只看 Elements 面板里有没有那个类名
真正难的不是写对 BEM，而是守住“谁负责哪一层”的边界感——Ant Design 负责交互行为与基础样式，你负责组合逻辑与上下文适配。一旦开始修改它的类名或状态命名，就等于主动放弃升级能力，也放弃了团队协作时的可预期性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
