html全局属性中class、id、style、hidden各司其职：class组织模块与行为，id锚定布局上下文，style实现动态精准控制，hidden提供语义化隐藏。
HTML全局属性本身不直接参与布局计算，但它们是布局控制链里不可跳过的环节——class和id决定样式绑定粒度，style能绕过CSS层快速干预，hidden比display: none更语义化且不影响可访问性。
用class组织布局模块，别只当样式开关
很多人把class当成纯CSS钩子，但在布局中它实际承担着“模块分组”和“行为归类”双重角色。比如一个响应式侧边栏区域，你可能需要同时触发CSS Grid重排、JavaScript折叠逻辑、以及屏幕阅读器的区域声明。
- 多个
class值用空格分隔，例如class="sidebar layout-collapsed js-toggleable"，分别对应样式、状态、交互三类职责 - 避免用
class名表达具体样式（如red-bg），而应表达布局角色（如main-nav、content-area） - 当使用CSS-in-JS或Shadow DOM时，
class仍是跨技术栈最稳定的布局标识符
id不是只为锚点和JS选中，更是布局上下文锚点
id在布局中最容易被低估的作用，是作为CSS :has()选择器或position: sticky容器的锚定目标。它让局部布局行为能基于唯一元素触发，而不是依赖DOM顺序或父级结构。
- 配合
position: sticky时，id可用来标记粘性临界点：<div id="sticky-trigger"></div>，再用CSS写#sticky-trigger:has(+ .content) { ... } - 用
id代替data-做布局开关更轻量：比如<main id="layout-grid"></main>比<main data-layout="grid"></main>少一次dataset解析 - 注意：同一页面重复
id不会报错，但会导致document.getElementById()只返回第一个，CSS选择器也可能意外失效
style属性在动态布局中比CSS类更可控
当布局尺寸、位置或可见性需实时响应用户操作（如拖拽调整面板宽度、滚动计算高度），style属性比切换class更直接、无CSS重排延迟、也无需预定义大量类名。
- 优先用
element.style.setProperty()而非直接赋值style.width，便于后续用getComputedStyle()读取计算值 - 慎用
style.display = 'none'隐藏布局区域；若需保持可访问性，改用hidden属性或aria-hidden="true"+visibility: hidden -
style内联样式优先级高于外部CSS，但无法用:hover等伪类扩展，复杂交互仍建议用class切换
hidden属性比display: none更适合条件性布局隐藏
hidden是HTML原生语义化隐藏机制，它不只是视觉隐藏，还明确告诉浏览器和辅助技术“这个内容当前不参与渲染流程”，比CSS隐藏更可靠。
- 对屏幕阅读器来说，
hidden会彻底忽略该元素；而display: none或visibility: hidden在部分旧版读屏软件中仍可能被读出 -
hidden不影响CSS层叠上下文或文档流，但会阻止focus()、getBoundingClientRect()等API返回有效值 - 不能用CSS覆盖
hidden效果（[hidden] { display: block !important; }无效），这是设计使然，不是bug
真正难的是权衡：什么时候该用class绑定一套完整布局规则，什么时候该用style直写单点尺寸，又什么时候必须靠id锚定一个不可替代的布局节点——这取决于你是否清楚当前改动会影响多少层（CSS、JS、辅助技术、SEO）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
