第三方组件不可硬套bem命名，应通过wrapper block语义隔离、属性选择器限定作用域及严格控制样式加载顺序来确保样式生效。
第三方组件不能硬套BEM命名
直接把 el-button 改成 myapp-el-button 或给它加 button__primary 类，既无效也不可持续。Element Plus、Ant Design 这些库的样式逻辑强依赖原始类名结构，比如 .el-button.is-disabled 控制禁用态，你改了前缀，JS 就不会加那个 class；.el-select__popper 是运行时动态插入的 DOM，你没法提前写死带前缀的版本。
用 wrapper block 做语义隔离最稳妥
不碰第三方组件任何 class，只在外层加一个带业务语义的容器 class：
- Vue 模板：
<div class="dashboard-form__date-picker"><adatepicker></adatepicker></div> - CSS 必须写成：
.dashboard-form__date-picker .ant-picker-input input（注意空格，不是连写） - React + CSS Modules：用
:global(.ant-picker-input)显式穿透，或在 JS 中动态加 class 再用 BEM 控制 - 避免写
.dashboard-form__date-picker.ant-picker-input——这会匹配不到，因为第三方组件没声明这个复合 class
属性选择器是 wrapper 不适用时的备选
全局提示（如 $message）、无 wrapper 入口的老库，只能靠属性选择器轻量拦截：
- 优先用
[class^="ant-"]（开头匹配），不用[class*="ant-"]（包含匹配），防止误伤content、container等词 - 必须限定作用域：
.myapp-ui [class^="ant-"]比裸写[class^="ant-"]安全得多 - Webpack
css-loader开启modules: true时，需在文件顶部加注释：/* webpackMode: "global" */ - Vue
<style scoped></style>不支持属性选择器穿透，得改用<style module></style>或显式写:global([class^="ant-"]) { }
样式加载顺序比 !important 还关键
很多人写了 !important 还盖不过第三方样式，根本原因是引入顺序错了：
- Vite 或 Webpack 项目中，第三方 CSS（如
element-plus/dist/index.css）必须在你项目样式之前import - 检查
main.ts或入口文件：如果先import './style/index.css'再import 'element-plus/dist/index.css'，你的规则永远排在后面 - 哪怕用了
.my-block:deep(.el-button)，如果 Ant Design 的 CSS 是通过插件自动注入且优先级更高，照样失效
真正难处理的，从来不是怎么写选择器，而是谁先加载、谁后生效、谁控制了最终渲染节点的 class 列表——这些细节一旦错位，BEM 再规范也救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
