解决CSS类名冲突，BEM规范实用指南

BEM规范并非简单地在类名中添加双下划线，而是一种将样式作用域、功能边界与维护责任“编码进类名”的工程化实践：它通过block__element--modifier的严格命名强制样式隔离，杜绝全局污染和权重战争；禁止无上下文通用规则、!important及深层嵌套，倒逼开发者以功能闭环为单位组织UI单元；从SCSS写法到React/Vue动态类名管理，每一步都围绕“类名即契约”展开——一旦HTML结构与Block语义脱节，看似合规的命名反而会埋下更隐蔽的样式炸弹。

直接改 .btn 或 .header 这类泛化类名，90% 的概率会炸掉其他页面——不是你写得不对，是 CSS 没作用域，所有同名类都在全局抢权重。

为什么 BEM 能真正隔离样式，而不是靠加载顺序或 !important

浏览器按 顺序解析 CSS，但最终谁生效，取决于 specificity 和 !important。你改了 Button.css，发现按钮没变色，大概率是 LegacyTheme.css 里一条 .button { color: red !important; } 挡住了——这不是加载顺序能解决的，是作用域失控。

BEM 把作用域“编码进类名”：search-form__submit 和 modal__submit 天然不重叠，哪怕它们都引入了同一份 CSS 文件，也不会互相覆盖。

• 禁止写 .button:hover 这类无上下文的通用规则；必须绑定 block，如 search-form__submit:hover
• 第三方库（如 Ant Design）的 .ant-btn 不受你控制，但你可以用 wrapper block 隔离：.myapp-form-field--date .ant-date-picker
• !important 是反模式：它会破坏 BEM 的 modifier 覆盖链，比如 button--primary 本该覆盖 button 的颜色，却被外部 !important 截断

Block 名怎么定才不会跨项目/模块冲突

Block 不是视觉容器，而是功能闭环单元。看到 .user-list 要立刻判断：它是否能独立渲染、有明确输入输出、不依赖父级 DOM 结构？否则就是伪 Block。

• 合格 Block：.search-form（含输入框+提交按钮+清空逻辑）、.notification-badge（含计数、角标、点击跳转）
• 不合格 Block：.section-2（纯视觉分组）、.left-sidebar（含位置词）、.red-text（含样式词）
• 跨项目迁移时，所有 block 名必须带明确业务前缀，如 salesforce-form、legacy-modal，否则 .header__title 在两个项目里规则不同，合并后后者直接覆盖前者

SCSS 里怎么写才不破坏 BEM 扁平结构

SCSS 嵌套本身不危险，危险的是嵌套出后代选择器。BEM 要求最终 CSS 类名是扁平的（.user-card__avatar），不是依赖 DOM 层级的（.user-card .avatar）。

• 错误写法：.user-card { .avatar { } } → 编译出 .user-card .avatar，破坏封装性，且无法从类名反推来源
• 正确写法只用 &__ 和 &--：.user-card { &__avatar { } &--loading { } }
• 禁用空格嵌套：&__avatar { &__icon { } } 是非法的，BEM 不允许 __ 嵌套
• 真需要图标变体？用 user-card__avatar--with-icon，而不是新增一层 __icon

React/Vue 中动态类名拼接容易踩哪些坑

手写字符串拼接（className={`user-card__button ${isDisabled ? 'user-card__button--disabled' : ''}`）易漏、难维护。关键不是“怎么拼”，而是“谁来管 Block 名”。

• 每个组件顶部定义常量：const BLOCK = 'user-card'，所有类名基于它生成
• 用 clsx 或 classnames 收敛逻辑，但别让它掩盖结构问题——传入 ${BLOCK}__button 前，先确认 user-card 确实定义了 __button
• Modifier 必须成对声明：button--primary button--disabled 正确，button--primary--disabled 是反模式
• Element 级 Modifier 必须带 Block 前缀：card__title--highlight 正确，title--highlight 错误（脱离上下文）

最常被忽略的一点：BEM 不是起个带双下划线的名字就完事，它本质是把“谁在管这个样式”编码进类名里。一旦 Block 名和真实 DOM 脱节（比如写了 .header__nav-item，但 HTML 是