根本原因是结构未分层、语义未对齐、格式无约束；重构是将混乱dom锚定到可推演、可测试、可协作的逻辑坐标，而非重写。
中后台系统HTML代码质量差，根本原因不是写得“不够快”，而是结构没分层、语义没对齐、格式没约束——重构不是重写，是把混乱的 DOM 树重新锚定到可推演、可测试、可协作的逻辑坐标上。
为什么中后台HTML特别容易失控
中后台页面普遍有三类典型结构：表单密集区（form + 大量 input/select）、数据表格区（table 或 div 模拟的网格）、操作面板区（header + aside + 工具栏）。但现实中，这些区域常被统一塞进 div class="container"，再靠 CSS 类名硬切逻辑，导致：
- JS 通过
document.querySelector('.btn-save')绑定事件，但这个类名可能在 7 个文件里重复定义 - 无障碍检测工具报错：「缺少
role或语义标签」，因为所有导航都用div class="nav" - 新增一个筛选条件时，要手动改 HTML、JS、CSS 三处，且没人敢删旧
class——怕影响某个隐藏的data-*逻辑
用语义化标签锚定功能边界
中后台不需要“花哨”的语义，但必须让每个区块有明确职责归属。重点替换以下几类：
- 把包裹整个操作区域的
div class="header-bar"改成<header class="app-header"></header>，并确保它只含h1、nav、搜索框等顶层控件 - 所有带标题的卡片/模块，用
<section aria-labelledby="section-title-1"></section>+<h2 id="section-title-1">用户管理</h2>，而非div class="card" - 表单区域必须包在
<form></form>内，且每个input都要有对应的<label for="user-name"></label>；禁用placeholder当作标签 - 表格必须用原生
<table>，禁用 <code>div+display: grid模拟——否则屏幕阅读器无法识别行列关系class 命名与结构解耦的关键动作
中后台最常犯的错误，是把 class 当作样式钩子和逻辑钩子混用。重构时优先做三件事：
- 剥离“行为类”：
class="is-loading"、class="has-error"这类应由 JS 动态增删，HTML 初始状态里不出现 - 收敛“布局类”：删掉所有
class="flex-row"、class="w-100"等纯样式类，改用 CSS-in-JS 或 utility-first 框架（如 Tailwind）统一管理 - 用 kebab-case + 语义前缀命名业务组件：
class="user-list-table"而非class="table-1"，class="filter-panel-form"而非class="form-right" - 禁止嵌套过深：超过 4 层
div的结构，立刻拆成独立<template></template>或提取为自定义元素（如<user-filter></user-filter>）
格式化不是审美问题，是协作契约
中后台多人协作下，格式混乱直接导致 Git 合并冲突频发、CR 效率低下。必须强制执行：
- 缩进统一用 2 个空格，禁用 Tab —— VS Code 设置
"editor.insertSpaces": true和"editor.tabSize": 2 - 每个块级元素独占一行，兄弟元素间加空行：
<header></header>和<main></main>之间必须空一行，<form></form>内部的<label></label>和<input>不空行 - 关键闭合标签后加注释：
<!-- .app-main -->，尤其当main里嵌了多个section时 - 属性顺序固定：
class→id→data-*→ 其他（如disabled、required），避免每次保存都触发整行 diff
真正难的不是写出语义化 HTML，而是在需求压着走、PM 随时改字段、后端接口又返了个新字段的时候，还能守住这四条线——它们不是规范，是防止系统退化成“不可读黑盒”的最后护栏。
- 剥离“行为类”：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
