可维护性度量模型不直接指导HTML重构，仅提供评估维度与数值反馈；需将嵌套深度等指标映射为具体改写动作，如嵌套≥6层时优先用语义化标签替代冗余<div>。
可维护性度量模型本身不能直接“指导”HTML重构，它只提供评估维度和数值反馈；真正起作用的是你如何把指标（比如嵌套深度、语义标签占比、CSS类名重复率）映射到具体改写动作上。
HTML嵌套深度超过5层时怎么剪？
浏览器渲染不报错，但人眼和JS逻辑极易出错。常见于老项目中用
模拟卡片、弹窗、表单的层层包裹。
- 先用浏览器开发者工具选中目标区域，右键 → “Edit as HTML”，复制结构到文本编辑器
- 统计最深路径的
<div>嵌套数，若≥6，优先找能替换为语义化标签的位置：比如<div class="card-body"><div class="content"><p>.../div></div>→ 直接改为<article><p>.../article> - 删除中间纯布局类的
<div>（如class="wrapper"、"inner"），用CSS Grid/Flex替代其定位职责 - 注意：如果JS通过
querySelector(".wrapper .inner")取元素，改完必须同步更新选择器，否则document.querySelector返回null
语义标签占比低于60%说明什么？
这不是硬性阈值，而是预警信号——意味着无障碍树缺失关键节点，SEO和自动化测试会明显变弱。
- 用
document.querySelectorAll("div, span, section")粗略统计非语义容器数量，再对比header, nav, main, article, aside, footer, figure, figcaption等原生标签总数 - 别强行替换：比如
<div id="user-menu">不是必须改成<nav>，只有当它实际承载导航链接时才合规；误用<nav>反而干扰屏幕阅读器 - 优先改造高频区块：页眉/页脚/文章主体/侧边栏，这四块改完通常就能把占比拉到75%+
- 警惕
<section>滥用——它需要有标题（<h2>或更高阶），否则语义无效
CSS类名重复率高影响重构判断？
重复类名（如12个组件都用btn-primary）表面看是复用，实则是耦合：改一个样式，所有地方跟着动，根本不敢动。
立即学习“前端免费学习笔记（深入）”；
- 用正则搜索
class="[^"]*btn-primary[^"]*"，确认是否真在不同上下文里共用同一类名 - 若按钮逻辑差异大（比如登录按钮要禁用态+加载动画，导出按钮要图标+下拉菜单），就该拆：改
btn-primary为btn-login、btn-export - 提取公共样式进CSS自定义属性（
--btn-padding），类名只管行为和场景，不管尺寸颜色 - 注意：Webpack/Vite的
css-loader默认开启modules时，类名自动哈希，此时“重复率”已无意义，重点转为检查JS里是否硬编码了btn-primary
指标只是镜子，照出问题但不给出解法。真正卡住重构进度的，往往不是不知道该用<article>还是<section>，而是改完后发现某个遗留的jQuery(".container-fluid .row .col-md-6")选择器彻底失效——这种依赖隐式结构的代码，比标签本身更难清理。
