大型前端项目应分层控制CSS重置：基础层用the-new-css-reset兜底，业务层按端与组件域精准覆盖，加运行时检测；Eric Meyer和Normalize.css存在无障碍失效、跨端UI漂移、伪元素盒模型问题三大硬伤。
直接上结论：大型前端项目不该用“一套CSS Reset打天下”，而应分层控制——基础层用 the-new-css-reset 做轻量兜底，业务层按端（Web / iOS / Android / 小程序）和组件域做精准覆盖，再加运行时检测兜底逻辑。
为什么不能直接套用 Eric Meyer 或 Normalize.css
它们在大型项目里会暴露三类硬伤：
- Eric Meyer 的全量重置会让
button、input、select等表单控件失去所有默认交互样式，导致无障碍支持（如 focus outline、高对比度模式）大面积失效，审计阶段常被卡住 - Normalize.css 保留太多“有用但不一致”的默认行为（比如
details在 Safari 和 Chrome 中的展开动画、textarea的 resize 行为），上线后容易出现跨端 UI 漂移 - 两者都未处理伪元素盒模型问题：
*::before, *::after默认仍是content-box，一旦团队有人写.icon::before { width: 16px; padding: 4px; }，在 Safari 上就可能撑开父容器
必须显式声明的三行核心重置
这是所有端都绕不开的底线规则，必须放在全局 CSS 最顶部（且不能被 @layer 或 scoped style 隔离）：
*,
*::before,
*::after {
box-sizing: border-box;
}
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
注意点：
立即学习“前端免费学习笔记（深入）”；
-
all: unset不会影响html根节点，所以字体继承链不会断；display: revert能让div保持block、span保持inline，避免布局塌陷 - 必须把
svg *和symbol *排除在外，否则图标字体或内联 SVG 的fill、viewBox会被重置掉 - 这条规则不能写成
*:where(...)加!important——:where()本身权重为 0，加!important会破坏后续组件样式覆盖能力
小程序与 WebView 的特殊处理
微信/支付宝/百度小程序的 Webview 内核（X5、UC、BLink）对 revert 和 :where() 支持不全，2026 年仍有不少机型 fallback 到旧版渲染引擎：
- 检测到
revert不可用时，需降级为display: block+ 显式重置关键属性：margin、padding、font、line-height - 小程序自定义组件中，
style属性传入的内联样式优先级高于全局 reset，但text、view等原生组件仍走 UA 样式，必须单独加一层page{...}作用域重置 - Android WebView（尤其系统 WebView）对
box-sizing继承异常，需对input、textarea、button单独补box-sizing: border-box !important，否则 padding 计算错误
CI/CD 中加入样式一致性校验
光靠人工 review 无法守住重置边界。建议在构建流程中插入两道检查：
- 用
postcss-custom-properties扫描所有 CSS 文件，禁止出现未声明的margin、padding、font-size等基础属性裸写（必须通过设计 Token 变量引用） - 用 Puppeteer 启动多端模拟器（Chrome Desktop / Safari iOS / WeChat MiniProgram DevTools），加载空页面，抓取
getComputedStyle(document.body)中的margin、padding、line-height值，比对是否为预期值（如0px或normal）
最容易被忽略的是：重置方案一旦上线，后续所有新引入的第三方 UI 库（比如某个图表库带的 reset.css）都会和你的重置层冲突，必须在 webpack/vite 插件中拦截并 warn —— 否则某天发现按钮突然变大，排查成本远高于初期设计成本。
