sidebar__trigger--is-collapsed 是唯一正确的触发器状态类名，用于标识交互节点的折叠状态；sidebar--condensed 才是控制布局收缩的修饰符，二者须分离且由 JS 同步切换。
sidebar__trigger--is-collapsed 是唯一正确的触发器状态类名
侧边栏折叠的交互动作发生在触发器上（比如汉堡图标、收起按钮），不是 sidebar 容器本身“坍缩”了。BEM 要求 Modifier 必须绑定到承载该状态的 DOM 元素，而用户点击的是 sidebar__trigger，它的视觉/行为变化才是“已折叠”的直接体现。
常见错误现象：sidebar--collapsed 加在容器上，结果 CSS 不生效、动画跳变、DevTools 里类名存在但样式没反应——根本原因是语义错位，选择器匹配不到真实交互节点。
实操建议：
-
sidebar__trigger--is-collapsed用于控制图标旋转、文字显隐等反馈 - 若需同步改变宽度或布局，另加
sidebar--condensed到 sidebar 元素上，由 JS 同步切换 - 两个类必须分离：一个是交互状态（
--is-前缀），一个是布局响应（--修饰符），不能混写在同一元素
sidebar--condensed 才是控制宽度收缩的布局修饰符
收起后侧边栏变窄（如从 240px → 60px），这是布局层的变化，不是触发器的状态。用 sidebar--condensed 这类明确表达“压缩尺寸”意图的修饰符，比模糊的 --collapsed 更准确，也更利于后续扩展（比如 sidebar--drawer 表示抽屉式）。
实操建议：
-
sidebar元素上设flex-basis: 240px，sidebar--condensed中改flex-basis: 60px，禁用width声明（它会覆盖flex-basis） - 确保父容器为
display: flex; flex-direction: row，且未设flex-wrap: wrap（否则flex-basis失效） - 动画必须写在基础类上：
.sidebar { transition: flex-basis 0.3s ease; }，而不是在sidebar--condensed里声明
子菜单展开动画别用 max-height: auto
max-height: 0 → max-height: auto 不是合法过渡，因为 auto 不可插值，浏览器无法生成中间帧，结果就是瞬间显示或无动画。
实操建议：
- 预估最大高度（如 400px），用
max-height: 0 → max-height: 400px - 更推荐
transform: scaleY(0) → transform: scaleY(1)，配合transform-origin: top和overflow: hidden在sidebar__list上 - 动画起点必须显式声明初始值，不能依赖
auto或留空
多个侧边栏共存时用 modifier 扩展，不另起 block 名
管理后台和用户中心各有一个侧边栏，它们结构一致、差异仅在主题或交互细节，就该复用 sidebar 块名，通过 sidebar--admin 和 sidebar--user 区分。
实操建议：
- 基础样式统一写在
.sidebar下，避免重复定义结构 - 差异部分单独写在
.sidebar--admin和.sidebar--user中 - 只有当差异极大（比如一个带折叠、一个固定宽度且无 JS 交互）才考虑拆成新 block，如
dashboard-sidebar，但要明确这是新功能域，不再是同一抽象层级
真正容易被忽略的是：transition 必须绑定在 .sidebar 基础类上，而不是状态类里；JS 切换类名时，优先用 is- 前缀（如 is-sidebar-condensed）确保它只由运行时逻辑控制，避免 SSR 渲染锁死样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
