结论：html模板中css reset不是“要不要做”，而是“怎么做才不翻车”；应优先用normalize.css打底，局部归零时用all: unset或精简选择器，禁用通配符*重置和全量eric meyer reset。
直接说结论：HTML模板里加 CSS reset 不是“要不要做”的问题，而是“怎么做才不翻车”的问题。现代项目几乎都不该用通配符 * { margin: 0; padding: 0; }，也别一上来就全量引入 Eric Meyer Reset；真正该做的是——用 normalize.css 打底，局部需要“归零”时再用 all: unset 或精简选择器。
为什么 * { margin: 0; padding: 0; } 在 HTML 模板里特别危险
它不是“简单粗暴”，是“盲目清零”。HTML 模板（比如 SSR 输出的初始 HTML、邮件模板、微前端子应用入口）往往依赖浏览器对表单、列表、标题等元素的原生渲染逻辑，而通配符会直接破坏这些：
-
textarea和input[type="text"]失去默认padding，文字紧贴边框，可读性与可操作性双崩 -
button的 focus outline 消失，键盘用户无法感知焦点，WCAG 可访问性直接不达标 -
select在 Safari 中可能塌陷或无法展开，details/summary渲染异常 - 所有元素的
display值被强制覆盖，article、nav等 HTML5 标签变成 inline，布局错乱 - 样式匹配性能开销随 DOM 节点数线性增长，首屏渲染延迟明显
HTML 模板中推荐的 CSS 归一化方案
核心原则：不追求“从零开始”，而追求“从一致开始”。normalize.css 是当前最稳妥的选择，尤其适合模板类场景：
- 它修复已知跨浏览器差异（比如
h1的 margin 在 Chrome/Firefox/IE 中不同），但保留语义层级和默认行为 -
ul/ol仍带缩进（用padding-left），只是统一了实现方式；sub/sup垂直对齐正常；code保持等宽字体 - 表单控件如
input、button在各浏览器中默认尺寸、行高、光标行为更接近 - 引入方式极轻量：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">，且必须放在你自定义 CSS 之前
哪些地方真需要“reset”，该怎么 reset
只有当 HTML 模板里嵌入了完全自定义的 UI 组件（比如独立封装的 Card、Modal、ToggleSwitch），且明确要求脱离任何父级或浏览器默认样式影响时，才需局部重置：
- 用
all: unset清除继承 + 默认样式，但必须手动补display：.my-toggle { all: unset; display: inline-flex; } - 避免对
body或html应用all，它会干掉滚动条样式、焦点轮廓、甚至scroll-behavior - 若想让某个按钮临时回归原生外观（比如调试时），用
all: revert，而非删样式 - 手写轻量 reset 仅限这 5 类：
body（清 margin）、h1–h6/p/blockquote（重置 margin）、ul/ol（list-style: none）、table（border-collapse: collapse）、img（vertical-align: middle）
HTML 模板中容易被忽略的关键点
很多人在模板里加了 normalize.css 就以为万事大吉，其实还有三个隐形坑：
-
normalize.css不处理box-sizing，但现代布局强依赖border-box—— 必须额外加：* { box-sizing: border-box; }，且这条规则要放在normalize.css之后、自定义样式之前 - 邮件模板等受限环境不支持
@import或外部 CDN，得把normalize.css内联，且需剔除其中的@supports和伪类规则（部分客户端不兼容） - 微前端子应用若各自引入 reset，可能导致样式冲突；应由主应用统一提供归一化基础，子应用禁用自身 reset
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
