电商详情页的“筛选栏”或“规格选择栏”必须用nav而非aside，因其是用户完成购买的必经操作入口，需用确保可访问性与语义正确性。
侧边栏该用 aside 还是 nav？
电商详情页里的“筛选栏”或“规格选择栏”，不是补充信息，而是用户完成购买动作的必经路径，所以它不该用 aside。用 aside 会被屏幕阅读器默认标记为“可跳过”，对无障碍访问是硬伤。
正确做法是：如果它承载的是当前模块内的一组操作入口（如“颜色”“尺寸”“数量”“加入购物车”按钮），就用 nav 并加 aria-label="商品操作导航"；如果只是纯展示型区块（比如“客服在线”“物流说明”），才考虑 aside。
-
nav必须有明确的语义目的，不能只为了套标签而用 - 老项目里常见把整个左侧栏包成
aside，结果 SEO 和读屏体验双双掉档 - 若侧边栏含表单控件（如多选框、滑块），
nav仍可用，但需确保每个可交互元素有正确label或aria-labelledby
固定侧边栏时，position: fixed 的高度陷阱
直接给侧边栏设 position: fixed 很容易导致内容被遮盖或滚动错乱——因为 fixed 元素脱离文档流，父容器高度塌陷，主内容区域无法自动避开它。
更稳妥的做法是：用 position: sticky 配合 top 值，让侧边栏在滚动到视口顶部时才“粘住”。前提是它的父容器有明确高度且不溢出。
- 如果必须用
fixed，主内容区域得手动留出等高空白（如margin-left: 240px），但响应式断点一变就失效 -
sticky在 Safari 旧版本中有兼容问题，可加-webkit-sticky前缀，但 iOS 15.4+ 已无须额外处理 - 别忘了设置
max-height和overflow-y: auto，否则长筛选项会撑爆视口
main 和侧边栏的嵌套关系怎么写？
一个页面只能有一个 main，且它不能包裹侧边栏。侧边栏和主内容应是同级兄弟关系，共同位于 body 下，或者包裹在同一个 section 内（但该 section 不能叫 main）。
典型错误结构：main 只承载“核心内容”的语义规则。
- 推荐结构：
... ... -
main里只放商品图、描述、评价这些不可替代的信息；侧边栏属于“辅助操作区”，语义上就是独立模块 - 用 CSS Grid 布局时，
main和侧边栏可直接作为同一网格容器的子项，无需额外 wrapper
响应式下侧边栏收起逻辑怎么不卡顿？
移动端常把侧边栏折叠为按钮 + 弹层，但用 display: none 切换会导致重排重绘卡顿，尤其在低端安卓机上明显。
真正轻量的方案是：保持 DOM 存在，用 visibility: hidden + opacity: 0 + transform: translateX(-100%) 组合隐藏，再配合 transition 做平滑位移。
- 避免在
@media查询里反复切换display，浏览器要重新计算布局树 - 弹层打开后，记得临时给
body加overflow: hidden，防止背景滚动 - 如果侧边栏含输入框，收起时焦点不会自动释放，得手动调用
document.activeElement?.blur()
侧边栏看似简单，但语义错位、定位失当、响应式切换生硬，这三点最容易在上线后被测试或用户当场揪出。尤其当它和放大镜效果、图片懒加载同时存在时，z-index 层级和 repaint 范围得反复验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
