必须用sidebar而非aside作为bem块名，因aside是html语义标签，用作block名会破坏命名隔离性、导致样式污染与结构耦合；自适应高度需通过flex布局与min-height: 0实现；缩写态应统一用sidebar--collapsed修饰符控制后代；多版本侧边栏优先用modifier扩展而非新建block。
侧边栏BEM块名该用sidebar还是aside
必须用sidebar，不能用aside。HTML的aside是语义标签，不是样式模块——把它当BEM block名（比如aside__item）会直接破坏命名隔离性：aside全局存在，任意地方写aside { width: 240px; }就会污染所有侧边栏；多个aside共存时（如文章页推荐栏 + 用户页操作面板），样式全挤在同一个命名空间下；一旦将来换成div或nav，所有类名得重写，违背BEM“样式与结构解耦”原则。
自适应高度时如何组织sidebar子元素
关键不是给容器设height: 100%，而是靠布局上下文约束。常见错误是把sidebar__body硬设高度，结果在flex/grid容器里失效。实操要点：
-
sidebar自身设display: flex; flex-direction: column; -
sidebar__header和sidebar__footer保持默认flex-shrink: 0 -
sidebar__body加flex: 1; min-height: 0;——min-height: 0是关键，否则它会无视剩余空间强行撑高 - 内部需滚动时，在
sidebar__body上加overflow-y: auto，而非在外层sidebar上设固定高
响应式缩写态下BEM修饰符怎么写
不该给每个子元素加--collapsed，比如sidebar__item--collapsed。缩写是布局层控制的响应式行为，不是侧边栏自身的状态。正确做法：
- 统一用
sidebar--collapsed作为整体修饰符 - 通过后代选择器控制子元素：
.sidebar--collapsed .sidebar__label隐藏文字，.sidebar--collapsed .sidebar__icon显示图标 - 动画过渡写在
sidebar基础类上：.sidebar { transition: width 0.3s ease; }，避免分散到各子元素 - 媒体查询逻辑放在布局容器（如
.layout--mobile）里，不塞进sidebar__trigger--mobile这类元素修饰符
多个侧边栏共存时如何区分admin/user版本
不用另起block名（如admin-aside），而是用modifier扩展：sidebar--admin和sidebar--user共享.sidebar基础样式，差异部分单独定义。只有当差异极大（比如一个带折叠、一个固定宽度且无交互）才考虑拆成新block，但需明确边界——例如dashboard-sidebar已是新功能域，不再是同一抽象层级。
真正容易被忽略的是：transition必须绑定在基础类.sidebar上，而不是状态类.sidebar--collapsed里；否则动画不会触发。还有，JS切换状态时优先用is-sidebar-collapsed这类is-前缀，确保它只由运行时逻辑控制，避免SSR初始渲染锁死样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
