唯一安全路径是用BEM块名包裹第三方组件，再通过容器选择器向下穿透控制；因JS动态添加的class、运行时插入DOM、CSS Modules作用域限制等原因，直接修改其class名会导致禁用态、浮层、焦点等样式失效。
不能硬改第三方组件的 class 名，否则禁用态、浮层、焦点等动态样式全失效；唯一安全路径是用 BEM 块名包裹它，再通过容器选择器向下穿透控制。
为什么直接加 BEM 类名或前缀会崩
Element Plus 的 .el-button.is-disabled 是 JS 动态添加的，你改成 .myapp-el-button.is-disabled，但 JS 根本不会加这个 class；.el-select__popper 是运行时插入的 DOM，你没法提前写死带前缀的版本；Webpack CSS Modules 或 Vue 下，.myapp-el-button 根本不会注入到 DOM——因为第三方组件自己没声明它。
-
.el-button:disabled规则权重高，但你加的孤立button__icon完全不继承它的状态逻辑 - 强行写
.el-button--primary { color: red }会破坏框架升级路径，CI 可能报错 - 所有修饰符（如
.is-loading）都由框架 JS 控制，你加的button--loading不会被自动触发
正确做法：用 wrapper block 包裹 + 容器选择器穿透
把第三方组件当黑盒，只控制它的容器和输入输出。BEM 块负责语义表达，第三方 class 负责底层渲染实现。
- Vue 模板中：
- CSS 中必须写成：
.form-actions__submit .el-button（注意空格！不是.form-actions__submit.el-button） - 需要控制禁用态时：
.form-actions__submit .el-button:disabled { opacity: 0.5; } - Vue
下，必须用:deep(.el-button)才能穿透作用域 - React + CSS Modules 下，要用
:global(.el-button)显式暴露
wrapper 不适用时的备选：属性选择器限定作用域
全局提示（如 $message）、老版本 UI 库不支持 classNamePrefix，也没法包裹 wrapper，就得靠属性选择器轻量拦截。
- 优先用
[class^="ant-"]（开头匹配），不用[class*="ant-"]（包含匹配），避免误伤content、plant - 必须限定作用域：
.myapp-ui [class^="ant-"]比裸写[class^="ant-"]安全得多 - Webpack
css-loader开启modules: true时，需在文件顶部加注释：/* webpackMode: "global" */ - Vue
不支持属性选择器穿透，必须改用或显式写:global([class^="ant-"]) { }
样式加载顺序比 !important 还关键
很多人写了 !important 还盖不过第三方样式，问题大概率出在加载顺序上。
- Vite 或 Webpack 项目中，第三方 CSS（如
element-plus/dist/index.css）必须在你项目样式之前import - 检查
main.ts：如果先import './style/index.css'再import 'element-plus/dist/index.css'，你的规则永远排在后面 - 哪怕用了
.my-block:deep(.el-button)，如果 Ant Design 的 CSS 是通过插件自动注入且优先级更高，照样失效 - 真正难处理的，从来不是怎么写选择器，而是谁先加载、谁后生效、谁控制了最终渲染节点的 class 列表
最常翻车的不是写错一个 __，而是没守住“块必须有明确物理边界”这条线——比如把 el-select 包裹进 form-field 后，又在 CSS 里写 .form-field .el-select__input，这等于主动放弃 BEM 的作用域隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
