postcss-normalize 不暴力重置，而是依据 HTML Living Standard 提取浏览器间真实默认样式差异，仅注入最小补丁（如修正 button 的 line-height），保留语义与可访问性；通过 include/exclude 精确控制范围，依赖 browserslist 动态适配输出。
为什么不用 eric-meyer-reset 或全量 CSS Reset
这类重置会无差别抹平 ul、blockquote、details 等原生语义元素的默认行为，导致列表符号消失、摘要折叠失效、表单控件失焦样式异常。你不是在“初始化”，而是在“破坏浏览器默认可访问性”。真正需要的是保留语义、仅对跨浏览器不一致的部分做对齐。
postcss-normalize 怎么替代手动重置
它不是暴力清空，而是按规范（如 HTML Living Standard）提取各浏览器对同一元素的真实默认样式，生成最小差异补丁。比如 button 在 Chrome 和 Safari 中的 line-height 不同，插件只覆盖这一项，其余继承原生表现。
- 安装：
npm install postcss-normalize --save-dev - 配置进
postcss.config.js，放在autoprefixer之前（确保 normalize 的声明优先被解析） - 不需要
@import或手动引入 CSS 文件——它直接注入 AST，天然早于所有业务样式 - 若项目已用
modern-normalize，别叠加；二者目标重合，叠加反而可能因 specificity 冲突引发意外交互
如何控制重置范围，避免影响 Web Components 或第三方 UI 库
postcss-normalize 默认作用于全局选择器（button、input 等），但可通过 include / exclude 选项精确过滤：
- 只重置表单控件：
{ include: ['button', 'input', 'select', 'textarea'] } - 排除
svg相关规则（防止图标宽高丢失）：{ exclude: ['svg'] } - 配合
postcss-modules使用时，它不会污染局部作用域类名，但会正确归一化你在模块内写的button标签样式 - 注意：它不处理
all: unset类规则，也不修改font-family或color—— 这些属于设计系统范畴，应由你显式定义
和 postcss-autoreset 的关键区别在哪
postcss-autoreset 是为组件隔离设计的，核心逻辑是“给 BEM 块加 all: initial”，适合微前端或独立组件库；而 postcss-normalize 是为页面级基础样式对齐服务的，目标是让 h1、p、ul 在 Chrome/Firefox/Safari/Edge 中渲染一致。两者定位不同，混用容易导致样式层级混乱。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的一点：normalize 的效果依赖 browserslist 配置。如果你的 .browserslistrc 包含 ie 11，它会注入兼容 IE 的 fallback 规则；若只写 last 2 versions，则完全跳过旧引擎逻辑——这个细节直接影响最终输出的 CSS 体积和兼容性边界。
