Mastering a Modern CSS Reset: 11 Essential Rules Explained

本文翻译自 Josh W. Comeau 的 My Custom CSS Reset，点击文末的 “阅读原文” 可查看原文。

每当我开始一个新项目时，首要任务是处理 CSS 中的细节问题，我使用自定义的 CSS Reset 来提升开发体验和用户体验。

我的 CSS Reset

下面是完整的 CSS Reset 代码：

<code>/* 1. Use a more‑intuitive box‑sizing model. */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
* {
  margin: 0;
}
/* 3. Allow percentage‑based heights */
html, body {
  height: 100%;
}
/* 4. Typographic tweaks – line‑height and font smoothing */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 6. Remove built‑in form typography styles */
input, button, textarea, select {
  font: inherit;
}
/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/* 8. Create a root stacking context */
#root, #__next {
  isolation: isolate;
}
</code>

虽然代码简短，但包含了许多实用技巧。

相关背景 传统的 CSS Reset 旨在消除浏览器默认样式差异，但现代浏览器已基本实现规范，完全去除默认样式并非必要。 本 Reset 更关注提升可维护性和可访问性，而非仅仅统一外观。

1. Box‑sizing 盒模型

使用

* { box-sizing: border-box; }

让宽度计算基于边框盒，避免内容宽度溢出。

示例：父容器宽 200px，子元素宽 100% 加上 20px 内边距和 2px 边框，总宽度为 244px，导致溢出。应用

box-sizing: border-box

后，内容宽度会自动扣除内边距和边框，避免溢出。

2. 移除 margin 的默认值

<code>* { margin: 0; }</code>

统一所有元素的外边距，防止意外的 margin‑collapse 并提供更可预测的布局。

3. 基于百分比的 height

<code>html, body { height: 100%; }</code>

在根元素上设定 100% 高度后，子元素才能正确使用百分比高度。对使用框架（如 Next.js）的项目，还需将根容器

#__next

包含在同样的规则中。

4. 更改 line-height

<code>body { line-height: 1.5; }</code>

设置全局行高提升可读性，满足 WCAG 对正文的最小行高要求。

5. 设置 font‑smoothing

<code>body { -webkit-font-smoothing: antialiased; }</code>

在 macOS 上关闭子像素抗锯齿，以获得更一致的文字渲染。

6. 更改媒体元素的默认值

<code>img, picture, video, canvas, svg { display: block; max-width: 100%; }</code>

将媒体元素设为块级并限制最大宽度，防止意外的内联空白和溢出。

7. 表单控件的字体继承

<code>input, button, textarea, select { font: inherit; }</code>

让表单元素继承父级排版，避免默认的极小字体和系统字体导致的可访问性问题。

8. 设置文字换行

<code>p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }</code>

使用

overflow-wrap: break-word

强制在没有软换行机会时进行硬换行，防止布局破裂。

9. Root 堆栈上下文

<code>#root, #__next { isolation: isolate; }</code>

为根容器创建新的堆栈上下文，避免 z‑index 冲突，确保模态、下拉等高优先级元素始终在最上层。

以上即为完整的可复制 CSS Reset，您可以直接在项目中使用并根据需要进行扩展。