HTML需要重构是因为其“坏味道”指结构混乱、语义失当、可维护性差的标记模式，如嵌套过深、滥用div/span、内联样式脚本、重复class等，虽不致页面崩溃，却抬高协作成本、无障碍风险与改版难度。
HTML 本身不支持函数、类或状态管理，所谓“坏味道”实际指结构混乱、语义失当、可维护性差的标记模式——自动化重构工具（如 Prettier、html-validate、Custom ESLint 插件）能识别并修正其中大部分问题，但必须明确：它们无法替代语义判断，也不能处理业务逻辑耦合。
为什么 HTML 也需要“重构”？
HTML 坏味道不是语法错误，而是设计层面的退化：
- 嵌套过深（
<div><div><div><p>）导致 CSS 选择器脆弱、屏幕阅读器解析困难 - 滥用
<div>和<span>替代语义化标签（如用<div class="button">而非<button>） - 内联样式（
style="color: red"）和脚本（onclick="alert()"）混入 HTML，破坏关注点分离 - 重复的 class 名称（
class="card card--large card--bordered"）暴露 CSS 设计缺陷
这些不会让页面崩溃，但会显著抬高协作成本、无障碍合规风险和后续改版难度。
用 html-validate 检测结构性坏味道
html-validate 是专为 HTML 静态分析设计的工具，比通用 linter 更懂语义规则。它能捕获：
立即学习“前端免费学习笔记（深入）”；
-
no-unused-elements：检测未被 CSS/JS 引用的空<div>或冗余 wrapper -
prefer-semantic-element：提示将<div role="navigation">替换为<nav> -
no-inline-style和no-inline-script：强制剥离内联声明 -
heading-order：检查<h2>后直接跟<h4>这类跳级问题
配置示例（.htmlvalidate.json）：
{
"rules": {
"no-inline-style": "error",
"prefer-semantic-element": "warn",
"heading-order": "error"
}
}
运行命令：npx html-validate src/**/*.html。注意：它只报错/警告，不自动修复 —— 这是刻意设计：语义替换（如 <div> → <section>）需人工确认上下文。
Prettier 对 HTML 的“安全格式化”边界
prettier 能统一缩进、引号、属性换行等风格，但它对 HTML 的重构能力极其有限：
- ✅ 安全操作：重排属性顺序（按字母）、标准化自闭合标签（
<img />→<img>）、折叠空格 - ❌ 不做操作：绝不会把
<div class="header">改成<header>；不会删掉看似多余但可能被 JS 依赖的<span> - ⚠️ 易踩坑：开启
htmlWhitespaceSensitivity: "strict"可能意外破坏行内元素间距（如<span>A</span> <span>B</span>中的空格）
它的价值在于消除团队格式争议，而非改善结构质量。别指望它“重构”，它只负责“整理”。
真正需要人工介入的三类坏味道
所有自动化工具都绕不开以下场景，必须由开发者决策：
-
语义归属模糊：一个包含标题、摘要、操作按钮的区块，该用
<article>、<section>还是<aside>？工具无法理解内容意图 -
CSS 类名重构：将
class="btn btn-primary btn-lg"改为 BEM 风格class="button button--primary button--large"，需同步修改 CSS 文件，工具无法跨文件协调 -
模板逻辑拆分：从一个 500 行的
index.html中提取页头、页脚、侧边栏为独立片段（include或组件），涉及构建流程变更，自动化脚本易出错
这些不是技术限制，而是 HTML 作为呈现层语言的天然属性：它的质量高度依赖与 CSS、JS、业务语义的协同。工具能扫清表层淤积，但重构的“脑力活”部分，始终得人来干。
