accordion__header 和 accordion__body 必须是同级元素，bem 要求二者均直属 accordion 块，禁止嵌套；状态修饰符 accordion--expanded 应作用于块而非元素，用 max-height 动画实现展开，目标值须为具体数值，嵌套面板需使用独立块名。
accordion__header 和 accordion__body 必须是同级元素
折叠面板的 DOM 结构一旦嵌套错层，accordion__body 的显隐控制就会失效或动画中断。BEM 要求 accordion__header 和 accordion__body 都直属 accordion 块，不能出现 accordion__header > .accordion__body 这类父子关系。
常见错误现象：
-
<div class="accordion"> <div class="accordion__header">...</div> <div class="accordion__body">...</div> </div>✅ 正确 -
<div class="accordion"><div class="accordion__header"><div class="accordion__body">...</div></div></div>❌ 错误：body 成了 header 的子元素，破坏 BEM 元素平级原则
实操建议：
- 用 DevTools 检查 Elements 面板，确认两个元素在 DOM 树中确实是兄弟节点
- JS 切换状态时只操作
accordion块本身（如加accordion--expanded），不要给accordion__body单独加类 - 避免用
display: none控制accordion__body显隐——它会跳过 transition，且与 BEM 状态语义冲突
accordion--expanded 修饰符必须作用于块，而非元素
状态类名写成 accordion__body--expanded 是典型错误。BEM 规定：可见性状态属于整个面板组件的行为契约，不是 accordion__body 自身的视觉变体。正确做法是把修饰符加在 accordion 块上，再用 CSS 选择器联动控制子元素样式。
为什么这样做：
-
.accordion--expanded .accordion__body可以统一控制展开逻辑，后续加动画、高度计算、键盘焦点管理都集中在此处 - 如果写成
.accordion__body--expanded，就等于把状态“下放”到元素层，导致 JS 需要同时维护多个元素类名，易遗漏或错位 - 不符合 BEM “状态修饰符应反映组件整体状态” 的设计意图
示例 CSS：
.accordion__body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion--expanded .accordion__body {
max-height: 300px; /* 不能用 auto */
}
max-height 动画卡顿？检查是否用了 auto
max-height: 0 → max-height: auto 不会触发过渡动画，浏览器无法对 auto 插值。所有基于 max-height 的展开动画，目标值必须是具体数值（如 240px），否则就是瞬间跳变或完全不动。
实操建议：
- 提前估算内容最大高度，设为安全上限（如
max-height: 500px），比 JS 动态测高更稳定 - 若内容高度差异大，可用 JS 测高后内联设置：
el.style.maxHeight = el.scrollHeight + 'px'，再加类触发 transition - 禁用
height: auto或min-height干扰——它们会覆盖max-height的动画行为
嵌套折叠面板必须拆成独立 accordion 块
在一个 accordion__body 里再放一个折叠面板，不能命名为 accordion__body-accordion 或 accordion__body--accordion。BEM 明确禁止元素（__body）再充当块（block）使用，这会混淆职责边界，导致样式泄漏和复用困难。
正确方式：
- 内部折叠面板用全新块名，如
faq-accordion或section-accordion - 保持结构扁平：
<div class="accordion__body"><div class="faq-accordion">...</div></div> - 每个块各自管理自己的
--expanded状态，互不干扰
容易被忽略的一点：嵌套时，外层 accordion 的 overflow: hidden 可能截断内层面板的下拉动画，需检查父容器是否设置了意外的裁剪样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
