必须用、、语义标签物理隔离侧边栏、顶栏、内容区，而非CSS浮动或定位；此举为JS和自动化测试提供稳定选择器锚点，避免样式调整导致逻辑失效。
侧边栏、顶栏、内容区必须物理隔离
三块区域不能靠CSS浮动或绝对定位硬挤在一起，得用语义化标签明确切分。侧边栏用<aside></aside>，顶栏用<header></header>，内容区用<main></main>——不是为了好看，是为JS脚本和自动化测试留出稳定的选择器锚点。比如document.querySelector('aside')永远指向菜单，不会因为某次样式调整就失效。
常见错误是把侧边栏塞进<div class="sidebar">里，结果多个页面复用时，JS逻辑要反复改选择器；更糟的是用<code>float: left强行并排，一旦加个响应式断点，布局直接错位。
- 侧边栏内部菜单项统一用
<a href="#" data-menu="employee">员工管理</a>，别用id，避免克隆后重复 - 顶栏的用户头像下拉菜单，触发器和弹层必须用同一组
data-role="user-dropdown"标记，方便事件委托绑定 -
<main></main>内禁止写任何导航逻辑，它只接收数据渲染，所有筛选、分页、导出按钮都归它管，但不决定跳去哪
用<template></template>封装可复用区块，但别在HTML里写交互
<template id="nav-item"></template>这类声明只是存结构，克隆出来就是“裸DOM”：没事件、没状态、不响应。你看到模板里写了onclick="toggleSubmenu()"，那根本不会执行——克隆后节点还没挂到DOM树上，JS压根找不到那个onclick属性。
正确做法是克隆后立刻遍历子节点，对带data-role="dropdown-toggle"的按钮手动绑addEventListener('click', ...)。下拉菜单展开/收起的状态必须绑定到该实例自身（比如el._isOpen = true），而不是用全局变量或class切换，否则点开一个，其他全跟着动。
立即学习“前端免费学习笔记（深入）”；
- 所有动态生成的菜单项，用
data-index或data-path传参，别拼字符串到href里 - 销毁组件时，必须调
removeEventListener，否则内存泄漏+重复绑定 - 不要用
innerHTML插入克隆结果——会丢掉已绑定的事件监听器，且无法保留对原始节点的引用
表单项绑定不能依赖form.elements自动遍历
想用for (let el of form.elements)统一处理赋值和监听？这在多选框、下拉框、文本域混合场景下必然翻车。原因很实在：input[type=checkbox]是否选中看checked，不是value；textarea设值必须用.value，用textContent等于白写；select[multiple]要遍历selectedOptions，而单选直接读.value就行。
所以模板里每个控件得有明确标识，比如<input type="email" data-key="email">，JS才好按data-key映射到数据对象的user.email字段。填值时直接el.value = data[el.dataset.key]，监听时再反向写回去。
- 复选框组用
name统一，但取值逻辑单独写：收集所有name="role"且checked为true的value - 日期控件（
input[type=date]）的值是字符串格式"YYYY-MM-DD"，别拿new Date()硬转 - 禁用状态统一走
el.disabled = true，别只靠CSS加opacity
响应式断点要从布局骨架开始控制
移动端折叠侧边栏不是靠@media隐藏<aside></aside>就完事。真正的通用性在于：顶栏必须能接管原属于侧边栏的导航入口，比如加个汉堡按钮，点击后在<header></header>下方动态插入临时菜单。这个菜单结构得和侧边栏用同一套<template></template>，只是渲染位置不同。
否则会出现“PC端菜单正常，手机点开空白”的情况——因为移动端菜单是另写的HTML，数据源、事件绑定、状态管理全都是两套逻辑，维护成本翻倍。
- 折叠逻辑触发后，用
document.body.classList.add('sidebar-collapsed')统一控制样式，别在多个CSS文件里重复写display: none - 顶栏搜索框在小屏下建议收进下拉菜单，避免挤压操作按钮空间
- 内容区的表格在移动端必须支持横向滚动，
overflow-x: auto加在<main></main>外层容器，别只包<table> 真正难的不是写出一套能跑的布局，而是让侧边栏换图标、顶栏加通知角标、内容区换表格样式时，不用动其他两块的HTML和JS。骨架切得清，后续所有扩展才不会互相污染。</table>
