bem中block嵌套时类名不带父级前缀，因block间是平级复用关系而非父子继承；如header内search-form应写为，而非header__search-form。
Block嵌套Block时，类名要不要带父级前缀
不用。BEM中Block之间是平级复用关系，不是父子样式继承关系。比如header里放search-form，正确写法是<header class="header"><form class="search-form"></form></header>，而不是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">
<p>这里<code>card</code>和<code>status-badge</code>都是Block，各自维护样式与逻辑，不耦合。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>避免写成<code>card__status-badge</code>——这会让<code>status-badge</code>失去跨上下文复用能力</li>
<li>如果<code>status-badge</code>在<code>card</code>里有特殊尺寸或边距，应通过<code>card--compact .status-badge</code>这类组合选择器微调，而非改命名</li>
<li>mix不等于无序堆砌：只混真正语义相关的Block，比如<code>button button--primary user-action-button</code>就容易混乱，应收敛为<code>user-action-button user-action-button--primary</code>
</li>
</ul>
<h3>嵌套太深但又不想拆出新Block怎么办</h3>
<p>优先重构HTML结构，而不是妥协命名。BEM允许Block嵌套任意层级，但不鼓励靠DOM深度表达逻辑关系。</p>
<p>真实场景中，后台权限菜单常出现<code>nav nav__item nav__item__link nav__item__link__icon</code>这种链式结构——这不是BEM，是选择器失控。</p>
<ul>
<li>把<code>nav__item__link__icon</code>改为<code>nav__item-icon</code>：Element名只描述自身角色，不体现路径</li>
<li>若图标行为差异大（比如在<code>nav</code>里是折叠箭头，在<code>table-row</code>里是操作按钮），那就该拆成<code>collapse-icon</code>和<code>action-icon</code>两个Block</li>
<li>SCSS里禁用<code>&__item &__link &__icon</code>这种多层嵌套写法，它会编译出后代选择器，破坏BEM作用域隔离</li>
</ul>
<h3>React组件里怎么安全实现Block嵌套</h3>
<p>每个组件只声明自己的Block名，不拼接父级。用常量统一管理，避免字符串散落。</p>
<p>错误写法：<code>className={`header__${subComponent}`}</code>——<code>subComponent</code>值一变，CSS文件里就得同步加新类，不可维护。</p>
<p>正确做法：</p>
<pre class="brush:php;toolbar:false;">const BLOCK = 'user-profile';<br>return <div classname="{BLOCK}">
<br> <avatar classname="{`${BLOCK}__avatar`}"></avatar><br> <bio classname="{`${BLOCK}__bio`}"></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结构代替设计决策了。
