先做重复结构审计，再收口样式，最后选构建时合并的加载方式；同一结构需在≥2页出现且字段稳定才抽组件，CSS须统一class规范，避免内联样式与运行时加载。
先做重复结构审计，别急着拆文件
组件化不是为了拆而拆。你打开几个页面，用浏览器开发者工具选中相同区域（比如导航栏、卡片列表、FAQ区块），看它们的 HTML 结构是否高度一致——class名可以不同，但嵌套层级、标签语义、子元素类型得基本一样。如果某块内容只在首页出现一次，且未来半年内没复用计划，就别硬抽成 header.html；否则只是把混乱从一个文件复制到十个文件。
常见错误现象：nav 在 A 页面用 div 包三层，在 B 页面直接写 ul，结果合并时样式全崩；或者 FAQ 的 question 用 h3，answer 用 p，到了 C 页面突然改成 dt/dd，后续 JS 操作直接报错 Cannot read property 'textContent' of null。
- 审计重点：结构一致性 > 文案差异 > 图片路径是否可参数化
- 工具建议：用 VS Code 的「Find in Files」搜
<header>、<footer>、<section class="card"这类高频片段 - 结论标准：同一结构出现在 ≥2 个页面，且内容字段稳定（如都有
title、desc、link），才值得抽
样式必须先收口，再抽组件
很多团队拆完 button.html 和 card.html 后发现：按钮在首页是 bg-blue-500，在产品页变成 bg-indigo-600，卡片阴影在博客页有 box-shadow: 0 2px 8px rgba(0,0,0,0.1)，在关于页却写死成 box-shadow: none。这不是组件化，是样式污染扩散。
真正该做的顺序是：先在 CSS 中定义一套基础规则，例如：
立即学习“前端免费学习笔记（深入）”；
/* styles/components.css */
.btn { padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.875rem; }
.btn--primary { background-color: #3b82f6; color: white; }
.btn--outline { border: 1px solid #3b82f6; color: #3b82f6; }
.card { border-radius: 8px; overflow: hidden; }
.card__header { padding: 1rem; background: #f9fafb; }
.card__body { padding: 1rem; }然后组件里只用这些 class，不写内联样式、不覆盖 !important。否则你改一个按钮颜色，就得 grep 全项目找所有 style="background:..."。
HTML 组件化 ≠ 自动渲染，得选对加载方式
纯静态 HTML 没有 v-for 或 {props}，所以 header.html 不会自己“注入”到每个页面。你得明确用哪种加载机制：
-
$(".header").load("components/header.html")：依赖 jQuery，页面首次渲染是空白 header，JS 加载完才显示，SEO 友好度低，且服务端不支持时直接白屏 -
<iframe src="components/header.html"></iframe>：隔离样式但破坏语义，无障碍访问（a11y）差，height难控制，移动端易出滚动条 - 构建时合并（推荐）：用
html-includes（Node.js 工具）或 Nuxt 的generate阶段，在部署前把header.html内容插入到每个页面的<header>位置。生成的是纯 HTML，无 JS 依赖，SEO 完全正常
关键判断点：如果你的部署环境是 GitHub Pages、Netlify 或任何静态托管服务，就别碰运行时加载；构建时合并才是静态场景下的合理解。
内容字段要稳定，否则组件只是套壳
一个 FAQ 组件如果只抽了 HTML 结构，但每页都手写 <h3>怎么退款？</h3><p>请在订单页点击...</p>，那它和复制粘贴没区别。真正可维护的组件，内容应来自结构化数据源：
比如定义统一的数据格式：
[{
"id": "faq-1",
"question": "怎么退款？",
"answer": "请在订单页点击‘申请退款’按钮。",
"link": "/help/refund"
}]再配合轻量 JS（如 Alpine.js）或构建时模板引擎（如 Nunjucks）渲染。哪怕暂时只用 JSON + 手动替换，也比写死 HTML 强——至少搜索 "怎么退款" 能一次性改全站。
容易被忽略的地方：图片路径、链接地址、语言标记（lang 属性）这些看似次要的字段，一旦不统一，组件复用时就会触发跨域请求失败、跳转 404、屏幕阅读器读错语言等问题。它们和 question 一样，都是组件的隐式 props。
