bem 命名规范要求块名语义完整、元素与修饰符严格用 __ 和 -- 区分，避免泛用名冲突；class 重复覆盖难溯源因 css 优先级机制与 devtools 显示局限；工具无法可靠自动转换非 bem 名，须人工逐文件清理并同步 html/js/css。
为什么 class 名重复导致样式覆盖却查不到源头
因为 BEM 之前，header、btn 这类泛用名在多个组件里反复出现，CSS 优先级又只看选择器权重和声明顺序，一旦某个第三方模块或旧代码插入了 .header { padding: 0 }，它就可能静默覆盖你新写的 .header { padding: 20px }，而 DevTools 里只显示“已失效”，不提示是哪个文件、哪一行干的。
- 清理前先跑一遍
npx purgecss --css "src/**/*.css" --content "src/**/*.js" --output "dist/css/"，它能筛掉完全没被引用的规则，但对“写了但被覆盖”的无效 - 真正要定位冲突，得在 DevTools 的 Styles 面板里右键点击被划掉的属性 → “Break on attribute modification”，再触发 UI 变化，浏览器会停在注入冲突样式的 JS 行
- BEM 不是加前缀完事，
.user-card__title--large中的双下划线（__）和双短横（--）必须严格区分：块名后跟__是元素，--是修饰符，混用如.user-card--title会导致语义断裂，后续维护者无法判断这是修饰符还是独立块
把现有 .modal 改成 .dialog-modal 算不算 BEM
不算。BEM 要求块（Block）自身具备语义完整性和复用性，.dialog-modal 是两个名词堆砌，既没体现层级（dialog 是块？modal 是块？），也没定义元素关系。用户看到 .dialog-modal__close 时，无法确定 close 属于 dialog 还是 modal。
- 正确做法是收敛为一个块：比如统一叫
.modal，内部元素写成.modal__overlay、.modal__body、.modal__footer-button - 如果确实存在两类模态——比如浮层式
.modal和全屏式.fullscreen-modal，那就拆成两个独立块，各自维护__元素，而不是用嵌套命名制造假继承 - 别为了“看起来像 BEM”强行改名，
.btn-primary比.button--primary更接近 BEM 原意，只要button是块、--primary是修饰符，且全项目统一，就成立
:global(.old-class) 在 CSS Modules 里还能用吗
能，但等于主动撕开 BEM 的隔离边界。CSS Modules 默认会对所有类名做哈希处理，:global() 是唯一逃逸机制，常被用来对接旧库或重置全局样式，但它会让 .old-class 直接暴露在全局作用域，和其他 BEM 块平起平坐，重新陷入命名污染。
- 仅在不得不覆盖第三方 UI 库（如 Ant Design 的
.ant-btn）或重置html/body时用:global()，且必须限定范围：:global(.ant-btn) .my-modal__content比直接:global(.ant-btn)安全得多 - 所有新写的业务组件，禁止在
:global()里塞自定义类名，否则 BEM 的命名约束就形同虚设 - Webpack 构建时若启用
css-loader?modules&exportLocalsConvention=camelCase，:global()内的类名不会被转换，但外部 JS 里通过styles.oldClass引用时仍会报 undefined —— 因为它根本没进 locals 对象
PostCSS 插件能自动把 .userHeader 转成 .user-header__title 吗
不能可靠做到。这类转换工具（如 postcss-bem 或正则批量替换）会误伤：比如把 JS 字符串里的 "userHeader"、注释里的 /* userHeader component */、甚至 HTML 属性值 data-type="userHeader" 全部改掉，而且无法识别语义层级——它不知道 userHeader 是块、还是元素、还是修饰符。
- 真正的清理必须人工逐文件过：先 grep 出所有非 BEM 命名的 class，再按组件粒度判断该归入哪个块，最后同步改 HTML、JS、CSS 三处引用
- VS Code 可以装
Auto Rename Tag插件，改 HTML 里class="user-header__title"时自动同步 JS 中的字符串引用，减少漏改 - 最易被忽略的是 CSS 动画名和媒体查询中的类名：比如
@keyframes userHeaderSlideIn或@media (max-width: 768px) { .userHeader { display: none } }，这些不会被任何 CSS 工具扫描到，必须手动检查
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
