accordion是block，accordion__header和accordion__body必须平级；状态类accordion--expanded只能加在accordion上，用.css控制子元素动画，禁用max-height:auto和跨层命名。
折叠面板的 BEM 命名不是“怎么写好看”，而是“怎么写才能让 JS 控制不翻车、CSS 动画不跳变、多人协作不猜意图”。核心原则就一条：accordion 是 Block，accordion__header 和 accordion__body 必须是它直属的兄弟元素，状态类 accordion--expanded 只能加在 accordion 上。
为什么 accordion__header 和 accordion__body 必须平级？
DOM 结构错层直接导致 CSS 选择器失效或动画中断。BEM 要求所有 Element 都直属 Block，不能嵌套在另一个 Element 内部。
-
<div class="accordion"> <div class="accordion__header"></div> <div class="accordion__body"></div> </div>✅ 正确：两个 Element 同属一个 Block -
<div class="accordion"><div class="accordion__header"><div class="accordion__body"></div></div></div>❌ 错误：body 成了 header 的子元素，.accordion--expanded .accordion__body根本选不到 - DevTools 里检查 Elements 面板，确认二者在 DOM 树中是并列节点，不是父子关系
- JS 切换状态时只操作
accordion元素的 classList，不要碰accordion__body自身
accordion--expanded 该加在哪儿？
加在 accordion 块上，不是加在 accordion__header 或 accordion__body 上。状态属于整个组件，不是某个子元素的视觉变体。
- 错误写法：
accordion__header--is-open或accordion__body--expanded—— 这会让 JS 需要同时维护多个类名，极易不同步 - 正确写法：
accordion--expanded，然后用 CSS 规则.accordion--expanded .accordion__body控制高度，.accordion--expanded .accordion__header-icon控制图标旋转 - 所有交互反馈（焦点、hover、键盘导航）都应通过
accordion--expanded派生选择器统一管理，避免样式逻辑分散
max-height 动画为啥不动？
因为用了 max-height: auto。浏览器无法对 auto 做插值计算，transition 直接跳过。
-
max-height: 0 → max-height: 300px✅ 可动画，前提是 300px ≥ 所有内容实际高度 -
max-height: 0 → max-height: auto❌ 不触发 transition，内容瞬间显隐 - 若内容高度不可预估（如含图片、富文本），改用
transform: scaleY(0)+overflow: hidden，并加will-change: transform - 绝对不要用
display: none切换accordion__body—— 它会中断过渡，也违背 BEM 状态语义
多级嵌套面板怎么命名？
每个层级都是独立 Block，禁止跨层命名（如 accordion__body__header）。
- 外层：
accordion，内层：nested-accordion—— 两个 Block 之间无样式耦合，可各自控制--expanded - 结构必须是：
<div class="accordion"><div class="accordion__body"><div class="nested-accordion"></div></div></div> - 禁止把内层命名为
accordion__nested或accordion__body-accordion—— BEM 不允许 Element 当 Block 用 - JS 初始化时，为
nested-accordion创建独立实例，不复用外层的控制逻辑
最易被忽略的一点：BEM 类名不是装饰，是契约。一旦 accordion__body 被塞进 accordion__header 里，或者 JS 开始给 accordion__body 单独加 --open 类，整套状态同步机制就从根上断了——后续加键盘支持、动画优化、无障碍属性，全得返工重来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
