BEM中Block嵌套时类名不带父级前缀，因Block间是平级复用关系而非父子继承；如header内search-form应写为<header class="header"><form class="search-form">，而非header__search-form。
Block嵌套Block时，类名要不要带父级前缀
不用。BEM中Block之间是平级复用关系，不是父子样式继承关系。比如header里放search-form，正确写法是<header class="header"><form class="search-form">，而不是header__search-form。
常见错误现象：dashboard__user-card__avatar——这其实是三个独立Block：dashboard、user-card、avatar，强行加前缀只会让类名膨胀、复用失效。
- 判断依据：这个子结构是否在别处（如弹窗、侧边栏）也单独出现过？是 → 它就是独立Block
- 它有没有自己的状态（如
is-loading）、事件（如onSubmit）、或需要独立动画控制？有 → 不该被父Block“吞掉” - 它的样式是否依赖父Block的具体实现？比如
user-card在dashboard里左对齐，在profile页里居中？那说明它本就不该被dashboard定义
多个Block共存一个DOM节点时怎么写class
用BEM官方支持的mix（混合）语法：一个元素可以同时携带多个Block或Element的类名。这是合法且推荐的做法，不是hack。
例如卡片内有个状态徽标，既属于card的视觉流，又需在别处复用：
立即学习“前端免费学习笔记（深入）”；
<div class="card status-badge status-badge--online">
这里card和status-badge都是Block，各自维护样式与逻辑，不耦合。
- 避免写成
card__status-badge——这会让status-badge失去跨上下文复用能力 - 如果
status-badge在card里有特殊尺寸或边距，应通过card--compact .status-badge这类组合选择器微调，而非改命名 - mix不等于无序堆砌：只混真正语义相关的Block，比如
button button--primary user-action-button就容易混乱，应收敛为user-action-button user-action-button--primary
嵌套太深但又不想拆出新Block怎么办
优先重构HTML结构，而不是妥协命名。BEM允许Block嵌套任意层级，但不鼓励靠DOM深度表达逻辑关系。
真实场景中，后台权限菜单常出现nav nav__item nav__item__link nav__item__link__icon这种链式结构——这不是BEM，是选择器失控。
- 把
nav__item__link__icon改为nav__item-icon：Element名只描述自身角色，不体现路径 - 若图标行为差异大（比如在
nav里是折叠箭头，在table-row里是操作按钮），那就该拆成collapse-icon和action-icon两个Block - SCSS里禁用
&__item &__link &__icon这种多层嵌套写法，它会编译出后代选择器，破坏BEM作用域隔离
React组件里怎么安全实现Block嵌套
每个组件只声明自己的Block名，不拼接父级。用常量统一管理，避免字符串散落。
错误写法：className={`header__${subComponent}`}——subComponent值一变，CSS文件里就得同步加新类，不可维护。
正确做法：
const BLOCK = 'user-profile';<br>return <div className={BLOCK}><br> <Avatar className={`${BLOCK}__avatar`} /><br> <Bio className={`${BLOCK}__bio`} /><br></div>;
-
Avatar和Bio组件内部各自定义const BLOCK = 'avatar'，不感知外层user-profile - JSX里只用
${BLOCK}__avatar这类Element引用，Modifier由子组件自己控制（如avatar--loading） - 禁止在父组件里给子组件加
user-profile__avatar--large这种跨Block Modifier，状态归属必须清晰
.parent .child .grandchild，就已经在用DOM结构代替设计决策了。 
