17370845950

应重置而非仅引入normalize.css，因其仅标准化而非清空默认样式；推荐modern-normalize加局部reset，避免全量重置破坏语义与可访问性。

为什么要重置而不是直接用 normalize.css

直接引入 normalize.css 并不能解决你项目里按钮默认有内边距、表单控件高度不一致、h1 到 h6 字体大小混乱等问题。它只是“标准化”浏览器默认行为，不是“清空”。如果你需要从零开始控制所有基础样式（比如设计系统起步、微前端子应用隔离），就得主动重置——但别手写 * { margin: 0; padding: 0; }，那会破坏表单可访问性和原生语义。

推荐用 modern-normalize + 局部 reset 组合

现代项目最稳妥的做法是：用 modern-normalize 处理跨浏览器差异，再对特定元素做轻量级 reset。它比老版 normalize.css 更精简，且保留了 button、input 的默认 focus 样式和语义行为。

• 安装：npm install modern-normalize
• 在入口 CSS 或主样式文件顶部引入：

  @import 'modern-normalize';

• 紧接着加几行关键 reset（只针对你真正在用的组件）：

  button,
  input,
  select,
  textarea {
    font: inherit;
    line-height: normal;
  }
  button,
  [role="button"] {
    cursor: pointer;
  }
  img {
    max-width: 100%;
    height: auto;
  }

避免用 CSS Reset 工具生*量重置样式

像 eric-meyer-reset 或某些在线“CSS 初始化生成器”输出的全量重置，会把 ol、ul 的列表符号干掉，把 blockquote 的缩进抹平，甚至让 details 和 summary 失去默认交互逻辑。这些不是“初始化”，是“破坏”。工具可以帮你生成结构，但不能替你判断哪些元素该保留原生表现。

• 检查你项目是否真用到了 fieldset、legend —— 如果不用，就别重置它们
• table 相关样式（border-collapse 等）只在需要表格布局时才显式设置，不要全局覆盖
• 慎用 all: unset，它会让 svg 图标丢失宽高、video 控制栏消失

PostCSS 插件适合团队统一规范，但别依赖它自动修复

如果团队多人协作，可以用 postcss-preset-env + 自定义插件在构建时注入基础样式，但注意：这类自动化只适合补漏，不能替代人工决策。

• 例如用 postcss-initial 自动给新声明的类加 box-sizing: border-box，但它不会知道你某个 .card 是否该继承 font-family
• CI 流程中可加检查：禁止提交含 * { box-sizing: border-box } 的全局规则
• 真正省时间的是建立内部 snippet 库，比如 VS Code 中配置一个 css:init 用户代码片段，插入的是上面提到的 modern-normalize + 四行核心 reset

实际项目里最常被忽略的，是 reset 后没同步更新设计系统的文本层级（font-size、line-height）和间距比例（margin-bottom 基准）。样式初始化不是一步到位的动作，而是后续所有组件样式生效的前提条件。