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"> —— 两个Block各自维护，互不假设对方存在。

多个Block共存一个DOM节点时怎么写class

BEM官方支持mix（混合），这是合法语法，不是hack。适用场景包括：卡片内徽标既要属于卡片视觉流，又需跨上下文复用；按钮既是通用组件，又需带业务语义。

• ✅ 推荐：<div class="card status-badge status-badge--online"> —— card 和 status-badge 都是Block，样式隔离，逻辑解耦
• ❌ 错误：<div class="card__status-badge"> —— 把 status-badge 变成 card 的Element，失去复用能力
• ⚠️ 注意：mix不是堆砌，只混真正语义相关的Block。比如 button user-action-button 就混乱，应收敛为 user-action-button user-action-button--primary

嵌套太深但又不想拆出新Block怎么办

优先重构HTML结构，而不是妥协命名。BEM允许任意DOM嵌套层级，但不鼓励靠深度表达逻辑关系。

• 如果发现 .block__elem__subitem 或 SCSS 里写了 &__item &__icon（中间有空格），说明已生成后代选择器，破坏BEM隔离性
• 遇到“子元素的子元素”，先问：这个 subitem 能不能在别处独立出现？能 → 拆成新Block（如 badge）；不能 → 它本就是Element，但命名仍须扁平：block__subitem，而非 block__elem__subitem
• SCSS 中只用单层嵌套：.block { &__elem {} &--modifier {} }，禁用多层 &__elem &__subitem

真正容易被忽略的，是把“视觉位置”当“语义归属”。header里放搜索框，不等于它是header的一部分；就像厨房里放冰箱，冰箱还是冰箱，不是“厨房__冰箱”。