应使用语义化HTML（如）替代堆砌，抽离JSON数据、BEM命名CSS、自动化PDF生成与校验，实现简历高效维护。
用语义化 HTML 结构打底，别用 <div> 堆砌简历
<p>纯靠 <code><div class="section"> 和 <code><div class="item"> 写简历，半年后自己都难改。浏览器不关心“这是工作经历”，但 <code><section></section>、<article></article>、<time></time> 这些标签自带含义，既方便后期加 CSS 或 JS 逻辑，也利于屏幕阅读器和 SEO（哪怕只是本地 PDF 导出）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
<section></section>包裹每个大模块（如“教育背景”“项目经验”），加id方便锚点跳转或 JS 操作，比如<section id="experience"></section> - 每段工作/项目用
<article></article>，体现独立内容单元；公司名、职位用<h3></h3>，时间用<time datetime="2022-03">2022.03–2024.08</time>——datetime属性值规范，后续可被脚本解析排序 - 避免嵌套过深：三级以内结构足够清晰，比如
<section> → <article> → <p></p></article></section>，别到第五层
把数据和样式彻底分开：用 JSON 管理内容，HTML 只做容器
硬编码在 HTML 里的姓名、公司名、技能列表，每次换工作都要打开 index.html 手动改七八处，极易漏改或格式错乱。真正易维护的做法是把所有可变内容抽成外部 JSON 文件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 建一个
data/resume.json，字段按模块组织，例如：{"personal": {"name": "张三", "email": "zhang@example.com"}, "skills": ["React", "TypeScript"]} - HTML 中只留占位结构，比如
<h1 id="name"></h1>、<ul id="skills-list"></ul> - 用几行
fetch()+innerHTML或textContent注入数据（无需框架），加载失败时 fallback 到静态 HTML 备份 - 导出 PDF 时，用 Puppeteer 或浏览器打印，它只会渲染最终 DOM，完全不受 JSON 加载影响
CSS 用 BEM 命名 + 工具类辅助，禁用行内样式和 ID 选择器
写个 style="margin-top: 24px" 或 #work-item-1 { color: #333 }，等于给维护埋雷：改一处样式，得全局搜 24px 或 work-item-1，还容易污染其他页面。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 主样式表用 BEM，比如
.section--experience、.job__title、.job__period，含义明确且作用域隔离 - 小范围调整优先用工具类：
<p class="mt-2 mb-1 text-sm"></p>（需提前定义好这套类，别现场写） - 禁用
!important；颜色/间距等统一抽成 CSS 自定义属性，比如:root { --spacing-md: 1rem; --color-primary: #2563eb; } - 打印样式单独写
@media print块，隐藏页眉页脚、调整字体大小，确保 Ctrl+P 导出 PDF 时干净
自动化生成 PDF 和校验，别靠肉眼检查链接/日期/拼写
手动导出 PDF 后再打开看有没有错字、断链、年份写成 2023 而不是 2024，效率低且不可靠。维护成本高的本质，是重复劳动没被机器接管。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
puppeteer脚本自动拉起 Chromium，加载本地 HTML，保存为resume.pdf，一行命令更新全部输出：npx puppeteer index.html - 加简单校验逻辑：读取
resume.json，检查dateStart是否早于dateEnd，邮箱是否含@，所有<a href></a>链接是否以https://开头（避免本地路径误提交） - 拼写检查用
codespell扫描 HTML 文本节点（需先提取纯文本），比肉眼快十倍
最麻烦的从来不是写第一版简历，而是三年后改两行内容却要花二十分钟找哪漏了斜杠、哪个 class 名拼错了、PDF 页边距又崩了——把结构、数据、样式、输出全部解耦，剩下的就是改 JSON 再跑个命令。
