不能给.ant-btn加myapp-前缀，因其破坏第三方库依赖的关系选择器（如.ant-btn.is-disabled）、无法匹配JS动态添加的类（如.el-select__popper）、升级维护成本高；应采用wrapper block隔离，如.form-field--date .ant-picker-input input，并配合:deep()或:global()穿透作用域。
直接用 BEM 命名你的代码，但别试图给第三方库的类名套 BEM 结构——那不是隔离，是自毁。
为什么不能给 .ant-btn 加 myapp- 前缀
第三方库（如 Ant Design、Element Plus）内部大量依赖关系选择器，比如 .ant-btn.is-disabled、.el-input__inner:focus。你硬加前缀变成 .myapp-ant-btn 后，这些规则全部失效：
- 按钮禁用态样式丢失，
is-disabled类还在，但父选择器对不上 - 下拉弹层（如
.el-select__popper）是运行时动态插入的，你没法预定义所有可能类名 - 每次库升级，都得人工核对新增/废弃的类名，维护成本指数级上升
用 wrapper block 实现最小侵入隔离
不改第三方组件，只控制它的上下文。在它外层加一个带语义的 BEM block 容器：
<div class="form-field--date"> <DatePicker /> </div>
然后所有定制样式都基于这个容器限定作用域：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.form-field--date .ant-picker-input input（空格分隔，表示后代） - ❌ 错误：
.form-field--date.ant-picker-input（拼接类名，语义错且不匹配） - 避免过度具体：
.form-field--date .ant-picker-input input:focus:hover::before这种链式写法极易被库后续版本击穿
CSS Modules 或 Vue scoped 下怎么穿透第三方类名
构建工具会默认隔离本地类名，但第三方类名不在你的模块里，必须显式声明“放行”：
- Vue 单文件组件中：
:deep(.ant-picker-input)，仅作用于.form-field--date内部 - CSS Modules 中：
:global(.ant-picker-input)，但必须包裹在本地 block 选择器下，例如.form-field--date :global(.ant-picker-input) - Webpack css-loader 开启
modules: true时，属性选择器如[class^="ant-"]会被模块化，需在 CSS 文件顶部加/* webpackMode: "global" */注释
容易被忽略的注入顺序和全局重置影响
第三方库的 CSS 加载时机往往不可控，哪怕你写了 .form-field--date :deep(.el-button)，也可能被库自带的 CSS 覆盖：
- 禁用全局通配符重置（如
* { box-sizing: border-box; }），改为限定在你的 block 内：.form-field--date * { box-sizing: border-box; } - 检查 DevTools 的 Styles 面板，确认你的规则是否真的排在第三方规则之后；若不是，考虑用
@import显式控制加载顺序，或提取为独立 CSS 文件并手动<link> - 内嵌 H5 场景下，宿主 App 可能注入自己的
.btn规则——BEM 的 block 前缀（如user-card__button）天然规避这类匹配，这才是它真正的防护价值
