降低后期维护成本关键在于标签、属性、class名皆“有据可查、有责可溯”，语义错位或命名模糊会导致DOM重写与样式断裂；<div>过度嵌套使新人难辨结构、屏幕阅读器失效、工具检测盲区、组件抽离受阻；id须全局唯一且仅用于锚点、label关联等特定场景，class应语义化命名如search-input；需用htmlhint、axe-cli等工具实现编译级约束，并强制DOCTYPE、lang、charset等基础规范。
降低后期维护成本，关键不在删代码、压体积，而在于让每个标签、每个属性、每个 class 名都“有据可查、有责可溯”。一旦语义错位或命名模糊，改一个按钮可能牵出三个组件的 DOM 重写和样式断裂。
为什么 <div> 套太多会直接抬高维护成本
浏览器不关心你叫它 div 还是 section，但人和工具会。当页面里全是 <div class="wrap"><div class="inner"><div class="content">，问题就来了：
- 新成员无法快速判断哪块是主内容、哪块是侧边推荐，得翻 JS 或 CSS 才能反推结构
- 屏幕阅读器把整页读成“div、div、div”，无障碍测试直接失败
-
htmlhint或axe-core检测不出语义缺失，但人工 Code Review 容易漏——因为“看起来没坏” - 重构时想把某个区域抽成 Web Component，结果发现它和父级
div的样式强耦合，抽不动
class 和 id 的使用边界必须卡死
很多团队把 id 当作“高级 class”用，这是后期 JS 绑定和样式覆盖混乱的根源：
-
id必须全局唯一，且只用于：锚点跳转（如#contact）、label[for]关联、极少数需document.getElementById()精确控制的场景 -
class是复用单元，同一页面可多个card、多个error-message；JS 应优先用querySelectorAll(".submit-btn")而非硬绑id - 禁止出现
class="red big bold"这类样式即类名，它把表现和结构混在一起，换主题时得全项目搜替换 - 推荐用
kebab-case语义命名：search-input、user-avatar、loading-spinner
如何用工具把规范变成“编译级约束”
靠文档和培训没法阻止误提交，必须让错误在落地前被拦截：
立即学习“前端免费学习笔记（深入）”；
- 在
package.json中集成htmlhint，配置强制检查："doctype-first"、"attr-value-double-quotes"、"tag-pair"、"id-unique" - CI 流程中加入
axe-cli扫描，把aria-label missing、img missing alt当作构建失败项 - VS Code 安装
Auto Rename Tag和Prettier插件，保存即格式化 + 标签自动闭合 - 所有 HTML 文件开头必须含
<!DOCTYPE html>、<html lang="zh-CN">、<meta charset="utf-8">，缺一不可——这些不是“建议”，是解析模式开关
最容易被忽略的其实是嵌套深度和属性显式化：比如 <input required> 在旧版 IE 里可能被忽略，写成 <input required="required"> 才真正跨浏览器可靠；又比如 <p><div>xxx</div></p> 会被浏览器自动修正为 <p></p><div>xxx</div>，DOM 结构已悄然变异——这些细节不进检查规则，就只能靠人肉盯，而人总会累。
