大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

本篇文章内容来自 Andy Bell ，其大约 4 年前写了一篇文章《现代 CSS Reset》，但是其并没有过时，本篇文章就是在其基础上更新的内容。

新 CSS Reset 调整

box-sizing

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

这条规则非常容易理解，其将所有元素和伪元素设置为使用 border-box 而不是默认的 content-box 来调整大小。

现在更多地关注让浏览器通过具有流体类型（fluid type）和空间的灵活布局来完成更多工作，这条规则虽然不再像以前那么有用。 但是，项目还是建议有明确的 box-sizing 设置，因此它仍然在 Reset 中占有一席之地。

html reset

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

这条规则最好的解释者是 Kilian，他还解释了为什么需要丑陋的前缀，可以阅读文章《Your CSS reset needs text-size-adjust (probably)》。

margin reset

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

上面的 reset 规则倾向于剥离用户代理样式以获得边距，从而支持在更宏观层面上定义流程和空间。 通过逻辑属性删除末端边距（end margin），而不是旧重置中的所有边。

列表 reset

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

Safari 有一些奇怪的表现，包括：如果删除列表样式，Safari 就会删除 VoiceOver 的语义。 有人认为这是一个功能，也有人认为这是一个错误，但是依然建议对其进行处理。

body reset

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

大多数开发者喜欢继承的清晰易读的行高，比如将 body 的最小高度设置为 100vh 也非常方便，特别是当开发者想要设置装饰元素时。 虽然使用像 dvh 的新单位可能比较吸引人，但是也可能引入一些奇怪的表现，这不是 CSS Reset 得职责所在。

而且，svh 单位似乎比 dvh 好，但大多数开发者还是会倾向于使用 vh 。 最后提醒一下，在深入研究新单位之前，请务必确保了解它们。

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

就像在全局范围内拥有较大的行高一样，为标题和按钮等设置小的行高也同样方便。如果页面字体具有较大的上升部分和下降部分（ascenders and descenders though），那么删除或修改此规则绝对值得，可以有效避免内容相互冲突造成的可访问性问题。

text-wrap Reset

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

这条规则取决于特定的项目、开发者本身，但是新的文本换行 text-wrap 属性使标题看起来非常漂亮。

currentColor 继承

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

这条规则首先确保文本装饰（text decoration）不会干扰上升部分和下降部分。 这条规则目前在主流浏览器中基本上是默认的，但设置它是一个很好的保险策略。

很多开发者喜欢默认设置链接来继承文本的当前颜色（currentColor），但如果不希望这样做，可以删除该规则。

font:inherit 设置

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

font:inherit 对于 input 和其他表单元素来说是非常有用的。 其主要会影响 <textarea> 元素，但将其应用于其他表单元素也没有什么坏处，因为它可以在项目中节省一些 CSS。

textarea reset

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em
}

对于 <textarea> 元素，该规则很方便。 默认情况下，如果不添加行属性，textarea 可能会非常小。 这对于粗指针（例如手指）并不理想，并且通过代理， <textarea> 元素往往用于多行文本。

元素锚定 Reset

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

如果一个元素被锚定，那么使用滚动边距在其上方添加更多空间是有意义的，只有当该元素被定位时才会考虑这一点。 以上一点点代码调整就能带来更好的用户体验！ 当然如果有固定标题，可能需要调整此设置。

完整的 CSS Reset

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

参考资料

https://andy-bell.co.uk/a-more-modern-css-reset/

https://dev.to/ziratsu/css-reset-58h9

https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/