不能给第三方类名硬加项目前缀，因其破坏库内部选择器链（如.ant-btn.is-disabled失效）、无法匹配动态生成类（如.ant-btn:focus-visible），且升级后维护成本剧增；应使用带业务前缀的wrapper block（如.myapp-form-field--date）配合空格后代选择器隔离作用域。
第三方 UI 库的样式不会自动尊重你的 BEM 命名空间，直接混用必然冲突；唯一可靠的方式是用 wrapper block 切断作用域，而不是改类名、加 !important 或手动拼前缀。
为什么不能给第三方类名硬加项目前缀（如 myapp-ant-btn）
这种做法看似隔离，实则破坏第三方库内部的选择器链。Ant Design 的 .ant-btn.is-disabled、Element Plus 的 .el-select__popper 都是运行时动态生成或依赖层级关系的，你加了前缀后，这些规则全部失效。更麻烦的是：库升级后新增的类（比如 .ant-btn:focus-visible）你根本没法预知，也无法同步补全。
常见错误现象：
- 按钮禁用态不生效
- 下拉菜单弹出位置错乱
- hover/focus 样式突然消失
- 构建产物里出现大量未命中 CSS 规则（DevTools 中显示 strike-through）
真正该做的，是承认第三方组件是“黑盒原子块”，只控制它的容器上下文，不碰它的 DOM 结构和 class 输出。
如何用 wrapper block 实现命名空间隔离
核心就一条：所有定制样式，必须以一个带业务前缀的容器类为父级选择器，中间用空格分隔，且禁止拼接。
- ✅ 正确：
.myapp-form-field--date .date-picker__input（空格，表示后代） - ❌ 错误：
.myapp-form-field--date.date-picker__input（无空格，语义变成“既是 wrapper 又是 picker 输入框”，不可能） - ❌ 危险：
.myapp-form-field--date .date-picker__input:focus:hover::before（过度具体，第三方未来加新伪类或属性就失效）
HTML 层只需一层包裹：<div class="myapp-form-field--date"><datepicker></datepicker></div>
这个 myapp-form-field--date 就是你整个隔离边界的起点，它必须出现在 HTML、CSS、构建配置三层——漏掉任意一层，隔离即失效。
第三方库不支持 classNamePrefix 时怎么安全拦截
像老版 Ant Design 或某些未暴露配置的 UI 库，无法让它们输出带前缀的类，就得靠属性选择器做软拦截，但必须加作用域限定：
- 用
[class^="ant-"]而不是.ant-，避免误伤含ant字符的其他类（如plant） - 必须前置 wrapper：
.myapp-form-field--date [class^="ant-"]，绝不能裸写[class^="ant-"] - Webpack + CSS Modules 下需加注释：
/* webpackMode: "global" */，否则模块化会截断作用域 - Vue
<style scoped></style>中属性选择器默认失效，得改用<style module></style>或显式写：:global([class^="ant-"]) { }
这类写法不是“覆盖”，而是“在可控边界内接收并约束”，它比 !important 可维护得多，也比 patch DOM 稳定得多。
BEM 类名本身要不要加项目前缀（如 myapp-button__text）
不需要，也不推荐。BEM 的 block__element 结构本身就是语义边界，button__text 已明确归属 button 块，再套 myapp- 是冗余且易错的。
真正要统一加前缀的，是 wrapper block 名本身（如 myapp-form-field），因为它承担着跨模块/跨团队的隔离职责。而 myapp-form-field__label 这种写法反而模糊了“谁是 block”的语义——它应该是 form-field__label，只是被包裹在 .myapp-form-field 容器下。
容易被忽略的关键点：wrapper 的 class 名必须贯穿三层——HTML 中写了 myapp-form-field，CSS 里所有规则都以它为前缀，构建工具（如 PostCSS）若自动加前缀，也必须只作用于你自己的 CSS，绝不触碰第三方类名。任何一层脱节，样式污染就会悄悄发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
