第三方库CSS类名天然不受BEM约束，不加前缀必致样式冲突；应通过wrapper block加命名空间隔离，如.my-dashboard__date-picker-wrapper .ant-picker-input input，并注意作用域、注入顺序与优先级控制。
第三方库的 CSS 类名（比如 .ant-btn、.el-input__inner）天然不受你项目 BEM 规则约束，不加前缀就等于把样式控制权让出去——冲突不是“会不会发生”，而是“什么时候爆发”。
为什么直接写 .button 或 .form__input 会失控
浏览器只认选择器匹配，不认你是谁写的。一旦第三方库也用了 .button，或者它的某个子元素动态生成了 .form__input（比如通过 JS 插入），你的样式就会被覆盖或反向影响。常见现象包括：
- Ant Design 升级后，
.ant-btn新增了:focus-visible规则，把你全局的button:focus覆盖掉 - 你在
.my-form下写了.my-form .input，但第三方组件内部也有个，结果被意外染上样式 - Webpack CSS Modules 开启后，
styles.input只能绑定你自己的类，对.el-input完全无效
用 wrapper block 加命名空间是最小侵入解法
不改第三方组件代码，也不动它的 class，只在它外层 DOM 打一个「隔离标签」，比如 my-dashboard__date-picker-wrapper。所有定制样式都基于这个前缀展开：
- 写法必须是
.my-dashboard__date-picker-wrapper .ant-picker-input input，不能省略空格变成.my-dashboard__date-picker-wrapper.ant-picker-input（那是拼接类名，语义错） - 避免过度具体：别写
.my-dashboard__date-picker-wrapper .ant-picker-input input:focus:hover::before，这种链式选择器后期无法复用，且易被第三方新规则击穿 - Vue 中要用
:deep(.ant-picker-input)，React + CSS Modules 中得写:global(.ant-picker-input)，否则 scoped 或 module 机制会截断匹配
当第三方库不支持 classNamePrefix 时怎么补救
像老版本 Ant Design 或某些未暴露配置的 UI 组件，没法让它们自动输出 .myapp-ant-btn 这种带前缀的类，就得靠 CSS 属性选择器做软拦截：
- 用
[class^="ant-"]（开头匹配）比[class*="ant-"]（包含匹配）更安全，避免误伤content、plant等含ant字符的类 - 必须限定作用域：
.myapp-ui [class^="ant-"]，而不是裸写[class^="ant-"]，否则会影响整个页面 - Webpack 的
css-loader启用modules: true时，默认会把这段规则也模块化，需在文件顶部加/* webpackMode: "global" */注释 - Vue 的
会让属性选择器失效，必须改用或显式写:global([class^="ant-"]) { ... }
最容易被忽略的优先级陷阱
即使你写了 .my-block .ant-btn，如果 Ant Design 的 CSS 是通过 import 'antd/dist/reset.css' 在入口文件顶部引入的，而你的样式是按需加载或异步注入的，它的规则仍可能因注入顺序靠前 + 选择器权重更高（比如它用了 .ant-btn:focus 而你只写了 .my-block .ant-btn）而胜出。真正稳的做法是：在 wrapper 内统一重置关键属性（如 box-sizing、font-family），再用子选择器逐层收紧，而不是依赖单条规则“赢过”对方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
