正确做法是用 wrapper block 包裹第三方组件并限定样式作用域，而非修改其类名；需配合属性选择器兜底和 js 动态类的 bem 约束，三道防线确保隔离。
第三方 CSS 库（如 Ant Design、Element Plus）的 .ant-btn 或 .el-input 类名天然不受你项目中 .button 或 .form__input 的约束，BEM 命名本身无法拦截它们——真正有效的隔离不是改它们的类名，而是控制它们的作用范围。
用 wrapper block 包裹第三方组件，而非重写类名
硬加前缀（如 myapp-ant-btn）会破坏库内部选择器链（比如 .ant-btn.is-disabled 失效），且无法覆盖运行时动态插入的类（如 .ant-select__dropdown）。正确做法是给容器打 BEM 块标：
- HTML 中外层加一个明确语义的块：
<div class="user-profile__date-field"><datepicker></datepicker></div> - CSS 中所有第三方样式必须前置该块：
.user-profile__date-field .ant-picker-input input，而不是.ant-picker-input input - 禁止拼接写法：
.user-profile__date-field.ant-picker（这是两个独立类名匹配，逻辑错误）
用属性选择器兜底，但必须限定范围
当第三方库不支持 classNamePrefix 时，[class^="ant-"] 比 [class*="ant-"] 更安全，避免误中 my-ant-custom 这类名字。但必须配合上下文容器使用：
- ✅ 正确：
.user-profile [class^="ant-"] { box-sizing: border-box; } - ❌ 危险：
[class^="ant-"] { margin: 0; }（全局生效，污染风险翻倍） - Webpack CSS Modules 下需加注释：
/* webpackMode: "global" */否则规则被模块化隔离失效 - Vue
<style scoped></style>中要用:deep(.ant-btn)，不能直接写.ant-btn
JS 动态添加类时必须走 BEM 命名路径
第三方组件常通过 JS 动态插入节点或切换状态类（如 tooltip--visible），此时裸名 'active' 或 'show' 会立刻污染全局：
- DOM 操作必须用完整 BEM：
el.classList.add('user-profile__tooltip--visible') - 禁止在模板里自由绑定：
:class="{ 'active': isOpen }"→ 改为:class="bem('user-profile__tooltip', { 'user-profile__tooltip--visible': isOpen })" - 服务端渲染的静态 HTML 若含不可控类（如
hljs-js），在外层加article-content块，再用.article-content [class^="hljs-"]精确接管
最容易被忽略的是：BEM 隔离效果不取决于你写了多少 __ 和 --，而取决于有没有一处漏掉——比如某个 .search-form .input 还存在，整个沙箱就失效了。第三方样式不会主动守规矩，你得靠 wrapper + 属性选择器 + JS 约束三道防线把它框死在指定范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
