必须用语义化标签（section/article/aside）切分模块、contain隔离渲染、form属性解耦表单，否则修改易引发连锁布局错误。
复杂 HTML 网页不能靠“通读全文再改”，必须按语义边界切块、隔离修改、独立验证。
用 section、article、aside 划出可编辑单元
浏览器不会自动识别“这块是用户管理表单”“那块是统计图表”，你得用语义化标签显式圈出每个功能区。否则改一个按钮的 margin，可能意外撑开整个侧边栏——因为没容器约束，CSS 会向上冒泡影响父级 div。
- 每个模块必须包裹在独立的
section或article中，避免裸div堆叠 -
aside专用于辅助内容（如筛选条件、操作日志），不参与主流程，样式和 JS 逻辑必须与main解耦 - 禁止跨模块共享 class 名，比如
.btn在用户列表和日志导出里同时存在，后期改颜色就会互相覆盖 - 检查 DOM：右键“检查元素”，确认每个功能区顶层标签有明确语义，且没有嵌套过深（超过 4 层
div就该拆）
表格与表单共存时，别动 <table> 里的 <code><form></form>
HTML 规范明令禁止在 <table> 内部直接写 <code><form></form>。浏览器解析时会自动闭合 <form></form>，导致 document.getElementById("edit-form").elements 拿不到任何字段——不是兼容性问题，是解析规则本身。
- 正确做法：把
<form id="edit-form"></form>放在<table> 外面，所有可编辑单元格的 <code><input>加上form="edit-form" - 内联编辑场景下，每行末尾的提交按钮用
<button type="submit" form="edit-form"></button>，而非绑定 click 事件手动收集数据 - 如果某列需下拉选择，
<select></select>同样要带form="edit-form"，否则 submit 时不提交该字段 - 验证方式：打开控制台，执行
document.querySelector("#edit-form").elements.length，值应等于你加了form属性的控件总数 - 对每个
section或article添加style="contain: layout style paint;"，这是最轻量的隔离手段 - 不要只加
contain: strict——它会禁用 transform 动画，导致折叠面板展开/收起卡顿 - 若模块内含
iframe或第三方 widget，必须额外加content-visibility: auto，否则 containment 不生效 - 验证是否生效：打开 Chrome DevTools → Rendering → 勾选 “Layer Borders”，被隔离的模块应有独立图层边框
- 打开浏览器开发者工具，用“Toggle device toolbar”拖动宽度滑块，观察哪个像素值开始出现错位或截断
- 在那个宽度附近设断点，例如
@media (max-width: 625px)，并只改该模块的grid-template-columns或flex-wrap - 避免在媒体查询里改全局字体大小或 padding，这会让其他模块布局连锁错乱；只调整当前模块容器的尺寸策略
- 用
min-content/max-content替代固定 px 值，比如表格列宽设为minmax(min-content, 1fr)，比150px更抗挤压
修改前先加 contain: layout style paint 隔离渲染影响
没加 containment 的模块，改一行 CSS 可能触发整页重排。尤其当页面含 ECharts 图表、虚拟滚动列表或大量 position: absolute 元素时，DOM 变动会波及无关区域，造成滚动卡顿或布局跳变。
响应式断点别按设备宽度写，按内容溢出点设
写 @media (max-width: 768px) 很方便，但实际问题常出现在 623px 或 841px——比如搜索框文字换行、表格列被压缩到看不见、卡片高度突然塌陷。硬套固定断点只会让调试时间翻倍。
真正难的不是写新功能，而是改旧代码时搞清“这一块到底归谁管”。语义标签是契约，contain 是护城河，form 属性是连接线——缺一不可。漏掉任意一层，下次修改就可能从修按钮变成救火。
