侧边栏宽度过渡动画卡顿或不触发
CSS transition 对 width 做动画时，如果初始/目标值是 auto，浏览器无法计算中间状态，动画直接失效或跳变。必须用具体数值（如 240px → 64px）或改用 flex-basis / min-width 配合 overflow 控制视觉收缩。
- 避免写
width: auto作为过渡起点或终点 - 推荐用
flex布局 +flex-basis替代纯width，更稳定且兼容 Flex 容器内缩放 - 若需“收起后仅留图标”，用
width: 64px+overflow: hidden，再配合text-overflow: clip防止文字溢出干扰布局
菜单列表项 hover 和选中态样式冲突
常见问题是 :hover 样式被 .active 的背景色覆盖，或图标/文字颜色在两种状态下不协调，导致视觉反馈模糊。
- 把
.active的优先级设得比:hover高（例如加!important或更具体的选择器，如.sidebar-menu li.active a） - 图标和文字颜色统一用 CSS 变量控制，比如
--menu-text-color和--menu-active-bg，方便响应式切换 - 收起状态（窄栏）下，只显示图标；展开时才显示文字——用
span包裹文字并设opacity: 0; width: 0; overflow: hidden;，配合transition同步动画
移动端点击区域太小，折叠菜单难操作
侧边栏在小屏上常被折叠为汉堡按钮，但按钮本身尺寸不足 44×44px，导致触控误点或失败，尤其在 iOS Safari 中更敏感。
- 汉堡按钮的
padding至少设为12px，外层容器确保点击热区 ≥ 44px - 用
label关联隐藏的input[type="checkbox"]实现无 JS 折叠，比纯:checked+ sibling 选择器更可靠 - 避免对
ul直接设display: none，改用max-height: 0; overflow: hidden;+transition，保留可访问性（屏幕阅读器仍能读取）
多级菜单展开/收起的 CSS 动画不自然
用 height: 0 → height: auto 做下拉动画会失败，因为 auto 无法参与过渡；强行设固定高度又无法适配内容变化。
立即学习“前端免费学习笔记（深入）”；
- 改用
max-height（如max-height: 0→max-height: 500px），值要略大于最大可能内容高度 - 配合
overflow: hidden和transition: max-height 0.3s ease-in-out - 若子菜单有 padding/margin，需额外包裹一层内层
div，让max-height只作用于内容区，避免空白干扰动画节奏
真正难的不是写出让菜单动起来的 CSS，而是让每次宽度变化、每层展开、每个 hover 状态都保持节奏一致、不闪跳、不遮挡内容——这些细节全靠反复测不同内容长度、不同缩放比例、不同设备指针类型才能调准。
