hidden属性仅适用于侧边栏容器元素（如<aside>或带ID的<div>），需配合[hidden] { display: none !important; }兜底CSS防止FOVC，且不可用于内部单个交互标签；其本质是语义级隐藏，不支持动画，优先级易与媒体查询、JS类切换冲突。
hidden 属性不能直接用于侧边栏标签的显隐控制
它不是 display 开关，而是语义级“逻辑不存在”声明。对 <nav>、<aside> 或整个 <div class="sidebar"> 用 hidden 是安全的；但若侧边栏由多个独立 <button>、<a> 或 <li> 标签组成，给单个标签加 hidden 会导致结构断裂、焦点跳失、ARIA 状态错乱——尤其在可访问性检测工具下会报错。
侧边栏整体隐藏/显示的正确写法
只对容器元素（如 <aside> 或带 id="sidebar" 的 <div>）使用 hidden，并配合 JS 原生属性操作：
- 初始 HTML 中写
<aside id="sidebar" hidden>✅ - JS 显示：
document.getElementById('sidebar').hidden = false✅（不是setAttribute('hidden', '')） - JS 隐藏：
document.getElementById('sidebar').hidden = true✅ - 检查状态用
el.hidden（返回布尔值），别用el.hasAttribute('hidden')—— SSR 场景下后者可能始终为true
必须加兜底 CSS，否则首屏会闪现
服务端直出 <aside hidden> 后，若 CSS 还没加载完，浏览器会先渲染再隐藏，造成“Flash of Visible Content”。唯一可靠解法是全局加：
[hidden] { display: none !important; }
这条规则必须放在基础样式表最底部，或 @layer base 末尾。不加它，hidden 在首屏就是裸奔状态。
立即学习“前端免费学习笔记（深入）”；
侧边栏内标签（如菜单项）该用什么控制显隐
想动态隐藏某个菜单项（比如权限控制下的“管理面板”按钮），hidden 不适用。原因有三：
-
<button hidden>会从可访问性树中移除，键盘 Tab 会跳过它，屏幕阅读器读不到 - 若侧边栏用了
flex或grid布局，hidden会破坏项目顺序和对齐逻辑 - 无法与动画配合：
hidden不支持transition，也不能和opacity或transform组合实现渐入滑出
正确做法是用类名 + CSS 控制：<button class="sidebar-item hidden-item">，配 .hidden-item { display: none; } 或更优的 .hidden-item { opacity: 0; transform: translateY(-10px); pointer-events: none; }。
真正容易被忽略的是：侧边栏是否“该隐藏”，往往取决于视口宽度、用户权限、路由状态三个变量；而 hidden 只能响应单一 DOM 属性变更。一旦混用媒体查询、JS 类切换、hidden 三者，优先级冲突几乎必然发生——这时候得靠 [hidden] 的 !important 强制收口，而不是指望它自动适配上下文。
