html工程化重构的核心是通过dom关系解耦实现标签职责明确——需避免导航修改牵动整个dom树的无障碍属性，警惕class重复之外的dom耦合，用独立性原则选用语义标签，解除css/js对层级选择器的依赖，并以lighthouse审计、禁用css验证及dom结构检查三大指标验证解耦效果。
HTML工程化重构不是把
批量替换成，而是让每个标签承担明确职责、彼此解耦——耦合度高时，改一个导航就可能牵动整个DOM树的tabindex、aria-labelledby和焦点顺序。
怎么判断HTML结构存在高耦合
别只看class命名是否重复。真正危险的耦合藏在DOM关系里：
- 修改某个
nav里的链接，导致main区域的aria-live区域意外触发更新 - 给
header加了position: sticky，结果footer在iOS Safari里消失（因父容器未设contain: layout） -
section内标题用h3，但上层article没设role="article"，屏幕阅读器跳过整块内容 - 多个页面共用同一份
template.html，但其中main被写死为id="main-content"，JS脚本靠ID绑定，一页面多main就失效
用独立性原则替换语义标签
语义标签本身不降低耦合，按“内容是否可独立分发”来选才有效：
-
aside必须能单独拎出来作为RSS条目或邮件摘要；如果只是广告位或无关推荐，用div role="complementary"更安全 -
article需自带完整元数据（time[datetime]、作者address），否则用section+aria-labelledby -
main全局唯一，且不能是article子元素；仪表盘多卡片场景，应拆成多个section+ 各自aria-labelledby="card-1-title" - 所有
header/footer必须是body或最近的article/section直系子元素，嵌套错层会破坏辅助技术的上下文感知
解耦class与DOM结构的依赖
当CSS或JS开始通过层级选择器（如.nav > ul > li > a）或兄弟选择器（h2 + p）定位元素，耦合就已经发生：
- 把
nav从header里抽出来单独管理，用aria-labelledby关联而非靠位置 - 避免
.card__header + .card__body这种相邻选择器，改用.card--expanded .card__body靠状态类控制 - JS操作DOM时，优先用
data-*属性标记目标（data-js="search-submit"），而非依赖form > button:last-child - BEM命名中禁止出现
block__element--modifier以外的连字符组合，比如card-header-title是反模式，应拆为card__header和card__title
验证解耦是否生效的三个硬指标
别信“看起来整洁”，用工具确认真实解耦程度：
- Lighthouse无障碍审计中，“Heading levels”和“Focus order”两项必须100%通过，否则DOM顺序仍被样式绑架
- 禁用CSS后，纯HTML文本流仍保持逻辑顺序（用
curl -s URL | lynx -stdin -dump快速验证） - 运行
document.querySelectorAll("main, article, section").forEach(el => console.log(el.id || el.tagName))，确保无重复main、无section缺失h2标题
最易被忽略的是：解耦不是删代码，而是把隐式依赖显性化——比如原本靠父子关系传递的焦点逻辑，现在要靠aria-activedescendant和tabindex="-1"手动维护；原本靠嵌套层级实现的样式隔离，现在得靠CSS :has()或Shadow DOM边界来守住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
