BEM 通过将作用域编码进类名实现样式隔离，如 search-form__submit 与 modal__submit 不会冲突，且要求 Block 必须是真实功能闭环容器，禁止无上下文通用规则和后代选择器。
直接改 .btn 或 .header 这类泛化类名，90% 的概率会炸掉其他页面——不是你写得不对，是 CSS 没作用域，所有同名类都在全局抢权重。
为什么 BEM 能真正隔离样式，而不是靠加载顺序或 !important
浏览器按 <link> 顺序解析 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 -
!important是反模式：它会破坏 BEM 的 modifier 覆盖链，比如button--primary本该覆盖button的颜色，却被外部!important截断 - 第三方库（如 Ant Design）的
.ant-btn不受你控制，但你可以用 wrapper block 隔离：.myapp-form-field--date .ant-date-picker
怎么起一个合法又语义清晰的 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
JS 动态拼 className 容易踩哪些坑
手拼字符串看着快，实际极易漏空格、错连字符、大小写混用，而且构建环境对大小写敏感度不同，本地跑得通，CI 上直接挂。
- ❌ 危险写法：
className={`button button--${variant} ${hasIcon ? 'button__icon' : ''}`}（缺空格、无防错、button__icon脱离 block） - ✅ 推荐用
clsx或封装常量：const BLOCK = 'search-form'; const cn = (e, m) => `${BLOCK}${e ? '__' + e : ''}${m ? '--' + m : ''}` - Vue/React 中避免直接写
class="search-form__input"后再 JS 控制显示隐藏——要用search-form__input--hidden这类 modifier，保持结构一致
最常被忽略的一点是：BEM 不是起个带双下划线的名字就完事。它要求 search__input 必须对应真实存在的 <div class="search"><input class="search__input"></div>。Block 名必须是真实容器节点，不能是抽象概念——否则整个命名体系就失去约束力，变成更难 debug 的“伪隔离”。
