block嵌套时应保持独立性，只要能独立存在、有明确功能语义且可复用，就该作为独立block，类名不拼接、不加父级前缀；判断标准为：删除后是否缺失完整功能、是否有自身状态与事件、是否依赖父级具体实现。
Block嵌套Block不是要不要做的问题，而是“这个东西到底算不算Block”的判断问题。只要它能独立存在、有明确功能语义、在别处也能直接用，那它就该是Block，嵌套时类名不拼接、不加前缀、不降级为Element。
怎么判断一个结构该不该单独作为Block
核心看三点，缺一不可：
- 删掉它，当前页面是否缺失一个完整功能？比如删了
search-form，搜索功能就没了 → 符合 - 它有没有自己的一套状态（
is-loading、is-invalid）、事件（onSubmit）、动画控制？有 → 符合 - 它的样式或行为是否依赖父级具体实现？比如在
header里左对齐，在profile页里居中 → 说明它本就不该被父级定义，符合独立性
反例：main-content、section-2、container —— 它们只是布局占位符，没行为、无复用路径、命名不具功能语义，不能当Block。
嵌套时类名拼接或带父级前缀为什么错
拼接类名（如 header__search-form）本质是把两个Block强行捏合成一个Element，后果很实在：
- 破坏复用：这个
search-form换到弹窗或侧边栏就得重写样式和逻辑 - 耦合样式：一旦改
header的 padding，header__search-form的定位可能全乱 - 语义污染：
header__search-form听起来像“header里的搜索表单”，但实际它就是“搜索表单”，位置不该决定身份
正确写法就是并列声明：<header class="header"><form class="search-form"></form></header> —— 两个Block各自维护，互不假设对方存在。
多个Block共存一个DOM节点时怎么写class
BEM官方支持mix（混合），这是合法语法，不是hack。适用场景包括：卡片内徽标既要属于卡片视觉流，又需跨上下文复用；按钮既是通用组件，又需带业务语义。
- ✅ 推荐：
<div class="card status-badge status-badge--online"> —— <code>card和status-badge都是Block，样式隔离，逻辑解耦 - ❌ 错误：
<div class="card__status-badge"> —— 把 <code>status-badge变成card的Element，失去复用能力 - ⚠️ 注意：mix不是堆砌，只混真正语义相关的Block。比如
button user-action-button就混乱，应收敛为user-action-button user-action-button--primary - 如果发现
.block__elem__subitem或 SCSS 里写了&__item &__icon（中间有空格），说明已生成后代选择器，破坏BEM隔离性 - 遇到“子元素的子元素”，先问：这个
subitem能不能在别处独立出现？能 → 拆成新Block（如badge）；不能 → 它本就是Element，但命名仍须扁平：block__subitem，而非block__elem__subitem - SCSS 中只用单层嵌套：
.block { &__elem {} &--modifier {} }，禁用多层&__elem &__subitem
嵌套太深但又不想拆出新Block怎么办
优先重构HTML结构，而不是妥协命名。BEM允许任意DOM嵌套层级，但不鼓励靠深度表达逻辑关系。
真正容易被忽略的，是把“视觉位置”当“语义归属”。header里放搜索框，不等于它是header的一部分；就像厨房里放冰箱，冰箱还是冰箱，不是“厨房__冰箱”。
