bem命名无法解决样式覆盖问题，因其不改变css优先级且无运行时隔离；需配合css modules、构建哈希或物理作用域限定才能真正防覆盖。
单纯靠 BEM 命名无法解决样式覆盖问题——它不改变 CSS 优先级，也不提供运行时隔离，只靠改名字降低冲突概率。真要防覆盖，得配合 CSS Modules、构建时哈希或物理作用域限定。
为什么 .button--primary 写了却没生效
BEM 修饰符不是独立规则，必须和对应 block 共存才起作用。浏览器看到 .button--primary 却找不到同时带 .button 的元素，这条样式就等于不存在。
- 错误写法：
.button--primary { color: blue; }→ 单独声明，无 block 绑定，权重低且语义断裂 - 正确写法：
.button.button--primary { color: blue; }→ 明确依赖.button存在，权重翻倍 - HTML 必须写成：
<button class="button button--primary"></button>，两个类名共存是前提 - 如果用 SCSS，禁止用嵌套生成：
.button { &--primary { ... } }→ 编译后仍是单类选择器，调试时找不到真实来源
CSS Modules 才是真正防覆盖的解法
BEM 再规范，编译后还是全局类名；.card__title 和另一个模块的同名类打进同一份 CSS，后定义的必然覆盖前一个。CSS Modules 通过哈希化实现物理隔离。
- Webpack/Vite 默认支持，把文件改成
Card.module.css，.card__title会编译成类似Card_card__title__Kx2f1 - 必须用 JS 对象方式绑定：
className={styles.card__title}，硬写class="card__title"会失效 - Vite 中若配置了
css.modules: { pattern: '[local]' }但没启用哈希规则，.card__header依然裸奔 - 要覆盖第三方组件（如 antd），需显式声明：
:global(.ant-btn) { border-radius: 4px; }
第三方组件库不能硬加 BEM 前缀
把 .ant-btn 改成 .myapp-ant-btn 看似隔离，实则破坏所有动态状态：JS 不会加这个类，.ant-btn.is-disabled 规则全失效，浮层、焦点、禁用态全部丢失。
- 稳妥做法是 wrapper 隔离：
<div class="my-dashboard__date-picker-wrapper"><adatepicker></adatepicker></div> - CSS 必须用空格分隔：
.my-dashboard__date-picker-wrapper .ant-picker-input input，不是连写 - Vue
<style scoped></style>下必须用:deep(.ant-picker-input)，否则穿透失败 - 老项目没法 wrapper 时，用属性选择器限定范围：
.myapp-ui [class^="ant-"]，避免误伤含ant的其他词
最容易被忽略的是构建配置细节：BEM 写得再标准，只要没启用 CSS Modules 或哈希规则，它就只是语义更清楚的全局污染。隔离不是靠人脑记规则，而是靠构建链路卡死出口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
