侧边栏不必强制用，推荐因其语义清晰、利于seo和无障碍；定位靠css而非标签名，避免误用
侧边栏必须用 <aside></aside> 吗？
不是必须，但推荐。用 <aside></aside> 语义清晰、利于 SEO 和屏幕阅读器；如果只是视觉上的“靠边”，<div class="sidebar"> 也完全可行。关键在 CSS 定位，不在标签名本身。但别用 <code><nav></nav> 套整个侧边栏——它只适合导航链接集合，里面混着广告、用户头像、搜索框就语义错乱了。
position: fixed 和 transform: translateX() 到底该选哪个？
看需求场景：
- 要常驻屏幕（比如右下角悬浮客服按钮）→ 用
position: fixed，配合right: 20px; bottom: 20px; - 要滑入滑出（比如移动端抽屉式菜单）→ 必须用
transform: translateX()，否则动画卡顿、触发重排 - 误用
left或margin-left做滑动 → 在旧版 Android WebView 或 iOS Safari 里大概率掉帧，尤其内容多时
注意：transform: translateX(-100%) 是隐藏的正确写法，不是 display: none ——后者会让 transition 失效。
点击按钮后侧边栏没反应，常见 JS 绑定错误
多数问题出在 DOM 查询或事件处理上：
- 写
document.querySelector('sidebar')→ 少了点号，应为document.querySelector('.sidebar') - 用
onclick="toggle()"写在 HTML 里 → 调试困难，且无法监听 Esc 键或遮罩层点击 - 切换状态只改 JS 变量，没同步到 DOM → 推荐用
element.classList.toggle('is-open')或设置data-open="true" - 移动端点击遮罩层关闭时，没加
e.stopPropagation()→ 点击会穿透到底层链接，导致跳转
键盘支持容易被忽略：按 Escape 键关闭，需监听 keydown 并判断 e.key === 'Escape'。
移动端展开后背景不能滚动，怎么解？
这不是侧边栏的问题，是 overflow: hidden 加错了位置。常见错误：
- 给
加style="overflow: hidden"→ 整页锁死，iOS Safari 会把页面顶到顶部，体验极差 - 正确做法：只给主内容区加
overflow: hidden，或者用position: fixed+inset: 0锁定遮罩层，让 body 自然保持可滚动 - 更稳妥的是用
touch-action: none控制遮罩层手势，避免误触发底层滚动
真正麻烦的不是让侧边栏动起来，而是让它在 iOS Safari 的 WebKit 和旧版 Android WebView 中行为一致——某些版本需要补 -webkit-transform，而加多了又可能干扰现代浏览器渲染。
