如何在CSS BEM规范中处理第三方组件样式覆盖？

第三方组件样式覆盖问题本质是作用域失控，正确解法是用 wrapper block 局部限定：将第三方组件包在自有 Block 内，CSS 仅作用于 wrapper 类，不直接修改其内部类名，且 modifier 需显式声明、类名须静态可预测。

第三方组件样式覆盖问题，本质不是 BEM 失效，而是你试图用全局选择器去“打补丁”。直接改 .ant-btn 或加 !important 看似快，实则埋下升级崩塌、调试失焦、多人协作冲突的隐患。唯一可控路径是：不碰第三方类名，只控制它的容器。

为什么不能给第三方类名加项目前缀？

硬加前缀（如把 .el-input__inner 改成 .myapp-el-input__inner）会破坏库内部的选择器链：

1. .el-input.is-focus .el-input__inner 这类运行时动态生成的规则完全匹配失败
2. .el-select__popper 是 JS 动态插入的浮层，前缀一加，所有弹出样式丢失
3. 每次 UI 库升级，类名微调（比如从 ant-btn-primary 变成 ant-btn--primary），你的前缀就得全量重对
4. Webpack CSS Modules 或 Vue <style scoped> 下，.myapp-ant-btn 根本不会出现在 DOM 中——第三方组件自己没写这个 class

wrapper block 必须怎么写才真正生效？

Wrapper 不是加个 class 就完事，关键在 HTML 结构和 CSS 书写方式：

1. HTML 中必须用独立容器包裹：<div class="search-form__date-picker"><ADatePicker /></div>，而不是 <ADatePicker className="search-form__date-picker" />
2. CSS 中必须带空格层级：.search-form__date-picker .ant-picker-input input，不是 .search-form__date-picker.ant-picker-input（后者是复合类名，永远不匹配）
3. modifier 组合必须显式声明：.search-form__date-picker--compact 要单独定义 padding / font-size，不能靠父级 .search-form--compact .ant-picker-input 推导——Portal 模式下第三方组件可能脱离该父级渲染
4. Vue <style scoped> 下，若需穿透到子组件内部，必须用 :deep(.ant-picker-input)，且只能写一次，嵌套 :deep() 无效

属性选择器作为 wrapper 备选时的硬约束

当 wrapper 不可用（如全局 $message、Notification），只能用属性选择器轻量拦截，但必须守住三条线：

1. 限定作用域：.myapp-ui [class^="ant-"] ✅，裸写 [class^="ant-"] ❌（会误伤 content、plant 等含 ant 字符的类）
2. 用 [class^="ant-"]（开头匹配），不用 [class*="ant-"]（包含匹配），精度差一个数量级
3. Webpack css-loader 开启 modules: true 时，对应 CSS 文件顶部必须加注释：/* webpackMode: "global" */；Vue <style scoped> 下必须改用 <style module> 或显式写 :global([class^="ant-"]) { }

CSS 加载顺序比选择器写法更致命

很多开发者写了 :deep(.ant-btn) 还是盖不过去，根本原因不是语法错，而是引入顺序反了：

1. Vite / Webpack 项目中，第三方 CSS（如 element-plus/dist/index.css）必须在你项目样式之前 import
2. 检查 main.ts 或入口文件：如果先 import './style/index.css' 再 import 'element-plus/dist/index.css'，你的规则永远排在后面，!important 也白搭
3. 哪怕用了 .my-block:deep(.el-button)，如果 Ant Design 的 CSS 是通过插件自动注入且加载优先级更高，照样失效
4. 真正难处理的，从来不是怎么写选择器，而是谁先加载、谁后生效、谁控制了最终渲染节点的 class 列表——这些细节一旦错位，BEM 再规范也救不回来