BEM命名不应硬加项目前缀，而应依靠block语义边界隔离；需警惕多模块共用CSS时的冲突，优先采用CSS Modules或构建时自动加命名空间，避免!important破坏层级，并禁用全局元素选择器。
用 BEM 命名时 class 名里该不该加项目前缀
不该硬加，但得有上下文隔离意识。BEM 本身靠 block__element--modifier 结构降低冲突概率，可一旦多个团队/模块共用同一 CSS 文件或注入顺序不可控，header__title 和第三方库的 header__title 仍可能打架。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 独立构建产物（如 Webpack 的
css-loader+modules: true）优先于手动加前缀 - 若必须全局 CSS，用唯一 block 名，比如把
button改成myapp-button，而非在所有 class 上叠myapp- - 避免
myapp-button__text--primary这种冗余写法——BEM 的 block 已是语义边界，再套项目名反而模糊职责
多个 CSS 文件引入顺序导致样式覆盖失效
不是“谁写在后面谁生效”那么简单。浏览器解析 CSS 是按 <link> 标签出现顺序，但 specificity（优先级）和 !important 才决定最终渲染结果。常见现象是：你改了 Button.css，但页面按钮样式没变，其实是 LegacyTheme.css 里一个 .button { color: red !important; } 挡住了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器 DevTools 的 Styles 面板点开每个规则，看哪条被划掉、为什么被划掉（灰色文字 + “invalid” 提示）
- 避免在业务组件里写
!important，它会破坏 BEM 的层级预期，让button--large无法覆盖button - 构建阶段用 PostCSS 插件如
postcss-prefix-selector统一加命名空间，比手写更可靠
使用 CSS Modules 后 React 组件 className 动态拼接出错
很多人以为 import styles from './Button.module.css' 后，className={styles.button + ' ' + (props.disabled ? styles.disabled : '')} 就万事大吉，结果发现 styles.disabled 是 undefined——因为 CSS Modules 默认只导出显式声明的 class，没声明就不会出现在 styles 对象里。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有要用的 class 必须在 .module.css 文件中明确定义，哪怕只是
.disabled {} - 动态 class 拼接推荐用
clsx库：className={clsx(styles.button, { [styles.disabled]: props.disabled })} - 不要混用 CSS Modules 和全局 class：
className={`${styles.button} global-class`}会绕过模块化隔离，埋下冲突隐患
第三方 UI 库（如 Ant Design）和自定义 BEM 样式互相干扰
Ant Design 的 .ant-btn 和你写的 .my-button 不冲突，但一旦你给 button 元素同时加了 ant-btn 和 my-button__inner，又在全局写了 button { padding: 8px; }，那所有 button 都会被影响——包括 Ant 的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用全局元素选择器（
button、h1、*[type="text"]），全部收归到 block 级命名空间下 - 用
:where()或:is()降低 specificity，比如把.my-button { font-weight: bold; }改成:where(.my-button) { font-weight: bold; } - 第三方库样式尽量通过官方主题配置（如 Ant Design 的
theme配置项）定制，而不是用覆盖方式硬写
真正难的不是写对一个 class，而是当 3 个 npm 包、2 个 legacy CSS 文件、1 个 runtime 注入的 style 标签同时存在时，你还得知道哪条规则正在悄悄覆盖哪条——这时候 DevTools 的 Computed 面板比任何规范文档都管用。
