不能直接给第三方类名加bem前缀，因为.ant-btn、.el-input等类名本身非bem结构且不受你控制，手写myapp-ant-btn既无效又破坏样式链；真正需隔离的是你自己的容器，应以bem块名包裹第三方组件，并通过:global()显式声明其类为全局。
为什么不能直接给第三方类名加BEM前缀
第三方库（如 Ant Design、Element Plus）的类名本身已带库标识（.ant-btn、.el-input），它们不是 BEM 结构，也不归你控制。手写 myapp-ant-btn 既无效（选择器根本不存在），又破坏原有样式链——浏览器找不到这个类，也不会匹配到真实渲染出的 .ant-btn。
真正要隔离的是你自己的容器，不是第三方类名
你需要保护的不是第三方组件内部样式，而是你项目里其他地方不被它的全局类污染，同时防止你写的样式意外泄漏进第三方组件。核心动作是：用 BEM 块名包裹第三方组件，所有自定义样式只作用于这个容器范围。
- 在模板中把第三方组件包进一个带 BEM 块名的容器：
<div class="myapp-user-form"><el-input></el-input></div> - 所有自定义样式都以
.myapp-user-form开头：.myapp-user-form__label、.myapp-user-form__submit - 第三方类名（如
.el-input）必须显式声明为全局：:global(.el-input) { ... }或/* webpackMode: "global" */，否则会被 CSS Modules / scoped style 隔离掉 - 禁止在
:global()里写宽泛选择器：:global(.el-input)✅，:global(*)❌，后者等于放弃隔离
构建层加前缀只适用于你自己的 BEM 类
如果你的项目确实需要物理级隔离（比如微前端子应用共用一份打包 CSS），前缀只能加在你自己的 block 上，且必须由工具自动注入，不能手写。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- Webpack +
css-loader：启用modules: { auto: true }，再配插件规则如prefix: '.myapp-'，它只会处理.user-form这类你写的类，跳过.ant-、.el-等已知第三方前缀 - PostCSS 插件（如
postcss-bem）：配置exclude: [/^\.ant-/, /^\.el-/]，避免误处理 - 绝对不要在 JS 中拼接带前缀的类名：
clsx('myapp-user-form__input')❌，这会让组件无法复用社区命名习惯，也导致和预处理器编译结果不一致
Shadow DOM 场景下第三方组件怎么处理
Web Components 封装第三方 UI 时，BEM 只能用于宿主元素（Light DOM），对 Shadow DOM 内部无效。你无法靠 myapp-date-picker__input 影响 <datepicker></datepicker> 内部的输入框。
- 宿主元素加 BEM 块名：
<date-picker-wrapper class="myapp-date-picker"></date-picker-wrapper> - 自定义样式仅作用于宿主及 slotted 内容：
.myapp-date-picker__trigger、.myapp-date-picker::slotted(input) - 想定制内部节点？必须由组件作者暴露
part="input"，你才能写.myapp-date-picker::part(input)—— 这和 BEM 无关，是 Web Components 的契约机制
BEM 不是万能胶水，它只管“谁该用哪个类名”，不管“类名能不能生效”。第三方组件的样式边界由其自身封装方式决定，你唯一可控的，是你自己那层容器的命名和作用域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
