Element Plus的BEM类名不可直接覆盖，应使用CSS变量或defineTheme注入主题；自定义BEM需语义一致、避免冲突，并通过stylelint校验确保规范。
Element Plus的BEM类名不能直接覆盖，必须走CSS变量或主题色注入
Element Plus默认样式用的是BEM命名（比如.el-button、.el-button--primary），但它的CSS是编译后注入的，直接写.el-button--primary { background: red; }大概率失效——因为它的权重被scoped或CSS-in-JS动态生成的规则压过，且可能被后续主题重载覆盖。
真正可控的方式只有两种：
- 通过
el-button组件的classprop传入自定义类名，再在全局CSS里用BEM结构匹配（如.my-btn .el-button--primary），但破坏隔离性，不推荐 - 改用官方支持的CSS变量方案：Element Plus所有可配置样式都暴露为
--el-color-primary等变量，覆盖它们即可批量生效 - 使用
defineTheme+useStyle（Vue 3 Composition API）在运行时注入主题，比硬写CSS更稳定
自定义BEM类名时，必须和Element Plus的块名保持语义一致
如果你在项目里封装了基于el-button的MyButton组件，想加自己的BEM扩展（比如my-button__icon），注意别和Element Plus原生类名冲突，也别破坏它的块归属逻辑。
常见翻车点：
立即学习“前端免费学习笔记（深入）”；
- 写
my-button__el-icon——el-icon是Element Plus的独立块，不该被挂到你的块下；应直接用my-button__icon并确保它和el-icon共存不干扰 - 写
my-button--size-large却没同步改el-button的sizeprop——BEM修饰符只管样式，行为还得靠props驱动，二者要对齐 - 把
my-button__loading当成状态类直接塞进DOM，但没配合v-if或v-show控制显示逻辑，导致样式冗余或JS判断错乱
stylelint必须配stylelint-selector-bem-pattern校验自定义BEM
Element Plus本身不校验你的扩展类名，但你自己的代码一旦混入.btn-primary或.header-title这种泛化命名，很快就会污染全局。CI阶段必须拦截。
关键配置项：
-
"selector-bem-pattern": { "componentName": "^[a-z][a-zA-Z0-9]+(-[a-z][a-zA-Z0-9]+)*$", "styleType": "bem" }——强制块名小写+短横线，拒绝MyButton或buttonV2 -
"ignoreSelectors": ["/^\..+:hover$/", "/^\..+:focus$/"]——放过伪类，避免误报 - 禁用
stylelint --fix自动修复BEM类名——语义转换没法靠正则完成，人工review才可靠
否则提交el-card-header这种类名，CI不会报错，但半年后没人能分清这是Element Plus原生类还是你写的扩展。
不要在Tailwind项目里强行套BEM类名，要用BEM思维组织@layer
如果你的Element Plus项目用了Tailwind，别写class="el-button my-button__trigger"再配一堆.my-button__trigger { @apply bg-blue-500; }——这既没发挥Utility优势，又让BEM变成累赘。
正确做法是用BEM思维组织Tailwind层级：
- 在
@layer components里定义@apply块：@layer components { .my-button { @apply inline-flex items-center px-4 py-2 rounded; } } - 用
@layer utilities封装状态变体：@layer utilities { .my-button--loading { @apply opacity-75 cursor-not-allowed; } } - 所有Element Plus组件的定制，只通过
theme.extend或plugins注入，不碰HTML class属性
BEM在这里不是写类名，而是帮你划清“哪些样式属于这个按钮”、“哪些属于那个表单”，避免bg-red-500散落在十几个文件里，最后连谁改过颜色都查不到。
