[译]我的自定义 CSS 重置

[YutHelloWorld]

原文：https://www.joshwcomeau.com/css/custom-css-reset/

每当我开始一个新项目时，首要任务就是打磨 CSS 语言中的一些粗糙边缘。我使用一组功能性的自定义基线样式来做到这一点。

很长一段时间，我使用 Eric Meyer 著名的CSS Reset。这是 一大块CSS代码，但它有点长；它已经十多年没有更新了，从那以后CSS发生了很多变化！

最近，我一直在使用自己的自定义 CSS 重置。它包括我发现的所有改善用户体验和 CSS 创作体验的小技巧。

像其他 CSS 重置一样，它在设计/样式方面是无主见的。无论您追求何种美感，您都可以将此重置用于任何项目。

在本教程中，我们将参观我的自定义 CSS 重置。我们将深入研究每条规则，您将了解它的作用以及您可能想要使用它的原因！

CSS 重置

事不宜迟，下面是代码：

/*
  1. 使用更直观的 box-sizing 模型
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. 删除默认边距
*/
* {
  margin: 0;
}
/*
  3. 在应用程序中允许基于百分比的高度
*/
html, body {
  height: 100%;
}
/*
   排版调整！
  4.添加可访问的行高
  5. 改善文字渲染
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. 修改媒体默认值
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. 删除内置表单的排版样式
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. 避免文本溢出
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  9. 创建根堆叠上下文
*/
#root, #__next {
  isolation: isolate;
}

它相对较短，但是这个小样式表中包含了很多东西。让我们开始吧！

一个迂腐的笔记 从历史上看，CSS 重置的主要目标是确保浏览器之间的一致性，并撤消所有默认样式，创建一个空白板。我的 CSS 重置并没有真正做这些事情。

如今，浏览器在布局或间距方面并没有太大的差异。总的来说，浏览器忠实地实现了 CSS 规范，并且一切都如你所愿。所以不再那么需要了。

我也不认为有必要去除所有浏览器默认设置。例如，我可能确实希望<em>设置标签font-style: italic！我总是可以在各个项目风格中做出不同的设计决策，但我认为剥离常识默认值没有意义。

我的 CSS 重置可能不符合“CSS 重置”的经典定义，但保证了创造性和自由性。

1. 盒子尺寸模型

未完。。