不能直接给第三方组件硬加BEM类名，因其破坏框架选择器链、导致状态失效且无法响应动态类；正确做法是用BEM块名包裹，通过容器选择器向下穿透控制样式。
不能直接给第三方组件的原始 class 套 BEM 结构，比如给 el-button 加 button__icon 类；正确做法是用 BEM 块名包裹它，再通过容器选择器向下穿透控制样式。
为什么不能在第三方组件上硬加 BEM 类名
第三方组件（如 ant-design、element-plus、bootstrap）的样式依赖自身 class 体系和选择器权重。你加一个孤立的 button__icon，既不继承它的基础样式，也不响应它的状态逻辑（比如 .el-button:disabled 不会自动影响 button__icon）。更严重的是，CSS 特异性可能被破坏：.button__icon 权重远低于 .el-button > i，结果图标样式根本不出效果。
-
class="el-button button__icon"→ 图标无样式、无状态联动 -
class="el-button">→button__icon失去与按钮禁用态的绑定 - 强行覆盖如
.el-button--primary { color: red; }→ 破坏框架升级路径，CI 可能报错
如何用 BEM 安全封装第三方组件
把第三方组件当“黑盒”，只控制它的容器和输入输出。BEM 块负责语义表达，第三方 class 负责底层渲染实现。
- HTML 中用 BEM 块名包裹：
- CSS 中只写容器规则，用
& .el-button提权透传状态：.form-actions__submit { & .el-button { padding: var(--spacing-sm) var(--spacing-lg); } & .el-button:disabled { opacity: 0.5; } } - 禁止在
.form-actions__submit内部写.el-button的后代选择器（如.el-button span），所有样式必须由 BEM 类名驱动
修饰符如何与第三方状态类共存
Bootstrap 或 Element Plus 自带的 .is-disabled、.el-button--loading 是框架级状态渲染机制；BEM 修饰符（如 form-actions__submit--urgent）应表达业务语义，而非重复控制状态。
- 让 BEM 修饰符触发第三方 class：例如
form-actions__submit--urgent对应 JS 动态添加.el-button--danger - 避免修饰符降级到子节点：
form-actions__submit--urgent__icon非法，图标若需独立状态，应抽成ui-icon--urgent块 - 动态浮层类（如 Bootstrap 的
.bs-tooltip-top）无法用 BEM 修饰符控制，只能单独用.tooltip .tooltip-inner覆盖
容易被忽略的物理边界和工具链校验
最常翻车的不是写错一个 __，而是没守住“块必须有明确物理边界”这条线——比如把 el-select 包裹进 form-field 后，又在 CSS 里写 .form-field .el-select__input，这等于主动放弃 BEM 的作用域隔离能力。
- 所有 BEM 类名必须和 SSR/CSR 渲染结果完全一致，否则 React 报
Prop `className` did not match - 必须配置
stylelint-selector-bem-pattern并设为{"styleType": "bem"}，CI 中跑npx stylelint "**/*.{css,scss}"拦截.form-field__el-select这类错误写法 - VS Code 插件无法高亮
form-field-el-select（缺双下划线），说明它已脱离 BEM 工具链识别范围
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
