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