应将折叠状态类加在触发器上而非容器上，即用 sidebar__trigger--is-collapsed 表达交互状态，sidebar--condensed 控制布局响应，二者职责分离且需严格匹配 DOM 结构。
侧边栏的折叠/展开状态不能直接用 sidebar--collapsed 这类修饰符写在容器上——它语义错位，会导致样式不生效、动画跳变、JS 切换类后无反应。
为什么 sidebar--collapsed 是错的
折叠动作的触发点是用户点击的元素（比如汉堡图标），不是整个 sidebar 容器本身。BEM 要求修饰符必须绑定到承载该状态的元素，即 sidebar__trigger。写成 sidebar--collapsed 会让人误以为整个侧边栏块被移除或宽度归零，但真实场景中：sidebar 常保持 position: fixed 和占位，只是内容区域缩窄或隐藏。
常见错误现象：
- JS 添加了
sidebar--collapsed类，DevTools 里能看到，但 CSS 没匹配上 - 动画卡在半途，或直接跳变，没有过渡效果
- 响应式切换时，子元素显隐逻辑混乱，
.sidebar__label收不干净
正确的状态类该加在哪儿
交互状态（是否已折叠）应由触发器控制，对应修饰符是 sidebar__trigger--is-collapsed。这个类只负责表达“当前触发器处于已折叠态”，不负责改宽度、不负责隐藏菜单项——那是布局逻辑的事。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- JS 只切换
sidebar__trigger上的sidebar__trigger--is-collapsed - 若需同步缩窄侧边栏容器宽度，另加一个布局级修饰符
sidebar--condensed，由 JS 同步添加到sidebar元素上 - 两个类职责分离：
--is-collapsed是交互反馈，--condensed是布局响应，避免混在同一元素上
如何用 CSS 控制折叠后的视觉表现
不要靠修改 height 或 display 做动画——前者无法从 auto 插值，后者会中断过渡。关键是要把状态类和样式规则对齐。
示例结构：
.sidebar__trigger--is-collapsed + .sidebar {
transform: translateX(-100%);
}
.sidebar--condensed .sidebar__label {
opacity: 0;
width: 0;
padding: 0;
margin: 0;
}
注意点：
-
sidebar__trigger和sidebar必须是相邻兄弟节点，否则+选择器失效 - 如果 DOM 中有 Vue
<transition>或 React Fragment，会打断兄弟关系，改用:has()或重构 HTML -
transform动画要加will-change: transform（尤其移动端），防闪屏
响应式缩写模式下别给每个元素硬加 --collapsed
缩写不是菜单项自身的状态，而是整个布局的响应式结果。不该写 sidebar__item--collapsed 或 sidebar__label--collapsed。
正确做法：
- 统一用
sidebar--collapsed作为父级修饰符 - 用后代选择器控制内部表现：
.sidebar--collapsed .sidebar__label - 所有过渡动画定义在基础类上（如
.sidebar__label），而不是修饰符里
真正容易被忽略的是：状态类名和 DOM 结构必须严格对齐。哪怕多了一个 wrapper div，sidebar__trigger--is-collapsed + .sidebar 就会失效——这不是 CSS 写错了，是 HTML 没按 BEM 的假设来组织。
