汉堡菜单BEM命名应使用menu--expanded表示展开状态，避免is-open等布尔修饰符；动画属性需在menu基础类中定义transition，menu--expanded仅覆盖终态样式；JS须用classList.toggle操作class，禁用dataset驱动。
汉堡菜单的BEM命名如何区分 open / close 状态
直接用 is-open 或 is-closed 修饰符是常见但不推荐的做法——BEM 明确反对布尔型修饰符，因为状态不可枚举、语义模糊，且容易与 JS 的状态管理逻辑耦合。正确方式是把动画触发点和视觉状态解耦：用 menu--expanded 表达「已展开」这个明确、可枚举的状态，而非 menu--is-open。
实际中建议只定义一个有意义的状态修饰符，比如：
-
menu：基础块（默认收起） -
menu--expanded：完全展开（对应 open 动画终点） - 不单独定义
--collapsed或--closed——它们是默认态，无需显式声明
CSS 动画应绑定在元素本身还是修饰符上
动画规则必须写在 menu 基础类里，而不是只写在 menu--expanded 中。否则切换时会丢失过渡过程（比如从 expanded → 默认态，CSS 找不到动画属性回退路径）。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 所有可动画的属性（
transform、opacity、height等）必须在menu上设初始值 +transition -
menu--expanded只负责覆盖终态样式，不重复写transition - 避免在修饰符里写
animation（如animate__fadeIn），它不可逆、难控制时序
`.menu {
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu--expanded {
opacity: 1;
transform: translateY(0);
}`
JS 切换时该操作 class 还是 dataset
必须操作 class，且严格使用 classList.toggle('menu--expanded')。不要用 dataset.open = 'true' 或自定义属性驱动 CSS（如 [data-open]），这违反 BEM 的“样式仅由 class 控制”原则，也破坏可维护性。
注意两个易错细节：
- 确保 JS 添加/移除的是同一个修饰符名（大小写、连字符全匹配），比如别写成
menu--Expand - 如果菜单有延迟初始化（如异步加载后才挂载），需在 DOM 就绪后再添加基础
menu类，否则 transition 会失效 - 移动端要注意
click事件可能被touchstart干扰，建议统一用addEventListener('click', ...)并加{ passive: true }
动画过程中如何防止布局抖动或点击穿透
汉堡菜单常因 height: 0 → auto 导致过渡失效或跳变。根本原因是 auto 无法参与 transition。解决方案只有两个：
- 用
max-height代替height（设一个足够大的安全值，如max-height: 500px），并确保内容高度不超过该值 - 改用
transform: scaleY()+overflow: hidden，更可靠且 GPU 加速 - 在
menu--expanded激活时，给 body 加overflow: hidden防止滚动穿透；退出时记得同步移除（别只靠 CSS）
最麻烦的其实是 backdrop 层：遮罩背景要用独立元素（如 menu__backdrop），不能复用 menu 块，否则 BEM 结构混乱、动画难解耦。
