多级折叠面板必须定义独立 block（如 nested-accordion），禁止用元素嵌套衍生新块；状态修饰符仅作用于 block（如 accordion--expanded），css/js 由此统一控制；__header 和 __body 职责分离，__body 独立控制 max-height 与 overflow，dom 结构须保证父子紧邻以维持交互热区。
多级折叠面板必须用独立 block，不能套用 parent__body--accordion
嵌套的折叠面板不是上层 accordion 的子元素，而是另一个可复用、有独立交互逻辑的组件。强行写成 accordion__body--nested 或 accordion__body-accordion 违反 BEM 基本原则：元素（__body）不能充当块（block），也不能衍生出新块语义。
正确做法是定义新 block，比如 nested-accordion，并在 HTML 中平级嵌入：
<div class="accordion">
<div class="accordion__header">一级标题</div>
<div class="accordion__body">
<div class="nested-accordion">
<div class="nested-accordion__header">二级标题</div>
<div class="nested-accordion__body">二级内容</div>
</div>
</div>
</div>
-
nested-accordion有自己的状态控制（如nested-accordion--expanded）、动画和 JS 实例 - 两个 block 之间无样式耦合，改
nested-accordion的动效不会影响外层accordion - 避免用
accordion__body__header这类跨层级命名——BEM 不允许元素再当块用
状态修饰符只能加在 block 上，别挂在 __header 或 __body 上
折叠/展开是整个面板的状态，不是标题或内容区单独的状态。把修饰符写成 accordion__header--active 或 accordion__body--open 会导致 JS 和 CSS 双重维护点，极易不同步。
所有状态驱动必须从 block 出发：
- JS 只需操作
element.classList.toggle('accordion--expanded') - CSS 用
.accordion--expanded .accordion__body控制高度与透明度 -
accordion__header-icon的旋转动画也靠.accordion--expanded .accordion__header-icon触发，不单独加类 - 禁止用
display: none切换accordion__body——它会中断max-height过渡，且破坏状态语义
__header 和 __body 的语义不能混淆，尤其别把标题塞进 __body
accordion__header 只负责触发交互、显示文本、承载图标；accordion__body 是唯一被 max-height 控制的容器，且必须设 overflow: hidden。常见错误是把标题也放进 accordion__body，或给内容区起名 accordion__content。
-
accordion__body初始max-height: 0，展开时设为具体像素值（不能用auto） - 图标属于 header 的一部分，应命名为
accordion__header-icon，而非脱离上下文的accordion__icon - 如果 header 内还有按钮或开关，它们属于
accordion__header的子元素，比如accordion__header-toggle，不升级为新 block
嵌套时 hover/焦点热区容易断链，DOM 结构比类名更重要
二级菜单闪退、鼠标一移就关闭，90% 不是 CSS 写错，而是 dropdown__toggle 和 dropdown__menu 在 DOM 中不相邻——中间插了 Fragment、<transition></transition> 或额外 wrapper。
对 nested-accordion 同样适用：
- 确保
nested-accordion__header和nested-accordion__body是直接父子关系 - 不要用 JS 动态
remove()或innerHTML = ''清空__body，用visibility: hidden或max-height: 0更安全 - 给
nested-accordion__body设min-width: max-content，防止文字折行后热区收缩导致移出触发
真正难的不是写对类名，而是让每个 block 在 DOM 和 JS 层都保持职责单一、边界清晰——一旦嵌套，就默认需要新 block，而不是加长元素名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
