sidebar__trigger--is-collapsed 不能写作 sidebar--collapsed，因 BEM 要求修饰符必须绑定到实际承载状态的元素（即触发器），而非整个侧边栏容器；后者语义错位，易致样式失效、动画跳变或调试困难。
sidebar__trigger--is-collapsed 为什么不能直接写成 sidebar--collapsed
因为 sidebar 是 Block，而收缩行为作用在触发器（比如汉堡图标）上，不是整个侧边栏容器的布局变体。BEM 要求 Modifier 必须绑定到实际承载该状态的元素——sidebar__trigger 才是用户点击后发生视觉/行为变化的节点。sidebar--collapsed 会让人误以为整个 sidebar 块被折叠了（比如宽度归零），但真实场景中：侧边栏容器常保持 position: fixed 和占位，只是内容区域不可见或缩窄。
常见错误现象：sidebar--collapsed 写在容器上，结果 JS 切换类时发现样式没生效，或者动画卡在半途；根本原因是语义错位，CSS 选择器匹配不到真实 DOM 节点。
- 正确做法：收缩逻辑由
sidebar__trigger控制，对应修饰符为sidebar__trigger--is-collapsed - 若需影响侧边栏整体宽度，用
sidebar--condensed这类布局级修饰符，且由 JS 同步添加到sidebar元素上，和 trigger 类分离 - 避免把交互状态（is-collapsed）和布局状态（--condensed、--drawer）混在同一元素上，否则难以调试和复用
如何让 sidebar__list 的折叠动画不跳变
max-height 动画失效的根源是设成了 max-height: 0 → auto —— auto 不是可插值的数值，浏览器无法计算中间帧，结果就是瞬间显示或干脆无过渡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用固定上限值替代
auto：展开时设max-height: 400px（需预估最大子项高度），收起时设max-height: 0 - 更稳妥的做法是改用
transform: scaleY(0)→transform: scaleY(1)，配合transform-origin: top，无需预估高度，且 GPU 加速更流畅 - 必须加
overflow: hidden在sidebar__list上，否则 scaleY 缩放时内容会溢出 - 移动端记得加
will-change: transform，防止闪屏或重绘抖动
JS 切换 is-collapsed 类时，为什么 DevTools 看得到 class 却没样式效果
大概率是 CSS 选择器权重不足，或者写了违反 BEM 原则的组合选择器，比如 .sidebar__trigger.is-collapsed —— 这种写法把 is-collapsed 当作独立类，脱离了 Block-Element 关系，浏览器不会识别它和 sidebar__trigger 的状态关联。
正确写法只有一种：.sidebar__trigger--is-collapsed 必须作为完整类名单独声明，且不能依赖父级或兄弟元素上下文。
- 检查是否误用了后代选择器：
.sidebar__trigger .sidebar__list这类写法在 BEM 中禁止，破坏作用域隔离 - 确认 CSS 文件加载顺序：如果重置样式（如 normalize.css）里有
.is-collapsed定义，会意外覆盖你的sidebar__trigger--is-collapsed - 用 DevTools 的 Computed 面板看最终生效的
transform或max-height值，反向定位哪条规则被屏蔽
响应式收缩和用户手动收缩能否共存
可以，但必须用不同修饰符区分生命周期和语义：sidebar--mobile（媒体查询驱动，布局级）和 sidebar__trigger--is-collapsed（用户操作驱动，交互级）互不干扰，甚至可叠加。
例如小屏下自动收起侧边栏，并允许用户再次点击展开——此时 DOM 可能同时存在 sidebar--mobile sidebar__trigger--is-collapsed，CSS 分别控制不同维度：
-
sidebar--mobile控制整体宽度、定位方式（如transform: translateX(-100%)） -
sidebar__trigger--is-collapsed控制图标旋转、sidebar__list的缩放或高度过渡 - 两者不冲突，因为修饰符作用于不同元素，且 CSS 规则彼此独立
真正容易被忽略的是：当用户在小屏手动展开后，窗口拉宽回桌面尺寸，sidebar--mobile 被移除，但 sidebar__trigger--is-collapsed 若未同步清理，会导致图标状态和实际布局不一致——这个清理逻辑必须由 JS 主动管理，不能依赖 CSS 自动推导。
