直接覆盖第三方类名失效是因为浏览器仅按CSS权重和加载顺序决定样式生效，而非作者身份；必须用带业务前缀的wrapper容器类实现命名空间隔离，贯穿HTML、CSS、构建三层。
第三方库类名不遵守BEM，为什么直接覆盖会失效
因为浏览器只按选择器权重和加载顺序生效，不认“谁写的”。你写 .button { color: blue; }，Ant Design 的 .ant-btn 也定义了 color: red;，最终谁赢取决于 CSS specificity 和引入顺序——这不是可维护的控制方式。更糟的是，第三方库升级后可能新增 .ant-btn:focus-visible，把你全局的 button:focus 规则意外覆盖。
必须用 wrapper block 加命名空间，而不是改第三方 class
不要试图 patch 第三方组件的 DOM 或劫持它的 class 生成逻辑。最轻量、最稳定的做法是在外层加一个带业务前缀的容器类：
<div class="myapp-form-field--date"><DatePicker /></div>- CSS 中所有定制样式都以该类为前缀：
.myapp-form-field--date .date-picker__input，注意中间有空格 - 禁止写成
.myapp-form-field--date.date-picker__input（拼接类名，语义错误） - 避免过度具体：
.myapp-form-field--date .date-picker__input:focus:hover::before后期难复用，且易被第三方新规则击穿
第三方不支持 classNamePrefix 时怎么补救
像老版 Ant Design 或某些未暴露配置的 UI 库，无法让它们输出 myapp-ant-btn 这类带前缀的类，就得靠属性选择器做软拦截：
- 用
[class^="ant-"]（开头匹配），比[class*="ant-"]更安全，避免误伤content、plant等含 ant 字符的类 - 必须限定作用域：
.myapp-ui [class^="ant-"]，不能裸写[class^="ant-"] - Webpack
css-modules下需加注释：/* webpackMode: "global" */防止模块化截断 - Vue
<style scoped>中属性选择器默认失效，得改用<style module>或显式写:global([class^="ant-"]) { }
构建时自动加前缀比手写更可靠
手写 myapp-card__title 容易漏、难统一。推荐在构建流程中注入前缀：
立即学习“前端免费学习笔记（深入）”；
- PostCSS 插件
postcss-prefix-selector可对整个 CSS 文件加前缀，如把.card→.myapp-card - 或用
postcss-bem将所有 BEM 类自动包裹进.myapp命名空间 - 注意：这类工具不改动第三方类名，只处理你自己的 CSS，不影响第三方选择器链
- 老项目已有
.user-info？别全量替换。先并存，用[class^="user"]日志监控使用点，再逐步收敛
真正容易被忽略的点是：命名空间不是加个前缀就完事，它必须贯穿 HTML 结构、CSS 选择器、构建配置三层；一旦某层漏掉（比如忘了给 Vue 组件加 :deep()），隔离就失效了。
