现代 CSS 重置

2025-05-27

现代 CSS 重置

我思考并享受着非常无聊的 CSS 东西——说实话，可能比我应该做的多得多。这些年来，我可能花了太多时间思考 CSS 重置。

在当今的 Web 开发时代，我们实际上并不需要进行大规模的重置，甚至根本不需要重置，因为 CSS 浏览器兼容性问题比旧版 IE 6 时代少得多。那个时代正是normalize.css之类的重置工具出现，为我们省去了不少麻烦。现在那样的日子已经一去不复返了，我们可以更加信任浏览器，所以我认为那样的重置可能基本上是多余的。

重置合理的默认值

我仍然喜欢重置东西，所以这些年来，我一直在慢慢地、不断地摆弄重置方法，就像痴迷地玩代码高尔夫一样。我会解释一下重置方法的具体内容以及原因，但在此之前，先把重置方法的完整内容放在这里：

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

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

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

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

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

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

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
Enter fullscreen mode Exit fullscreen mode

分解

我们从 box-sizing 开始。我直接重置了所有元素和伪元素，以便使用box-sizing: border-box。

*,
*::before,
*::after {
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

有些人认为伪元素应该设置inheritbox-sizing 的值，但我认为这很愚蠢。如果你想使用不同的 box-sizing 值，请明确设置——至少我是这么做的。我在CSS From Scratch上写了更多关于 box-sizing 的内容。

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

margin在设置了 box-sizing 之后，我会对和进行一次全面的重置padding，并根据浏览器样式进行设置。这些都很容易理解，所以我就不多说了。

不过，我会提到列表的情况。我只选择具有属性的列表，因为如果使用class普通的<ul>or<ol>属性，我希望它看起来像一个列表。很多重置，包括我之前的重置，都会主动移除这个属性。

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
Enter fullscreen mode Exit fullscreen mode

接下来是主体样式。我尽量保持简洁。<body>即使视口为空，用 填充视口也很有用，所以我将 设置为min-height。100vh我还喜欢平滑的锚点滚动，所以我scroll-behavior: smooth也设置了 。

我只设置了两种文本样式。我将 设置line-height为 ，1.5因为默认值1.2不够大，无法容纳可访问且可读的文本。我还设置text-rendering为optimizeSpeed。使用optimizeLegibility可以使您的文本看起来更美观，但可能会出现严重的性能问题，例如30 秒的加载延迟，所以我现在尽量避免这种情况。不过，我有时会在微文本部分添加它。

ul[class],
ol[class] {
  list-style: none;
}
Enter fullscreen mode Exit fullscreen mode

就像边距和填充规则一样，我只重置list-style列表元素具有class属性的位置。

a:not([class]) {
  text-decoration-skip-ink: auto;
}
Enter fullscreen mode Exit fullscreen mode

对于没有 class 属性的链接，我进行了设置text-decoration-skip-ink: auto，使下划线的渲染方式更易读。这个设置可以在链接上全局设置，但之前我遇到过一两次冲突，所以我保留了这种方式。

img {
  max-width: 100%;
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

接下来是经典的流体图像样式。我将图像设置为块状元素，因为坦白说，人生苦短，不值得忍受底部那奇怪的空隙，而且实际上，图像——尤其是在我的作品中——往往表现得像块状。

article > * + * {
  margin-top: 1em;
}
Enter fullscreen mode Exit fullscreen mode

我非常喜欢这个 CSS 技巧，终于鼓起勇气把它添加到了 reset 中。这个猫头鹰选择器会选中文章的直系后代，并1em为其添加顶部边距。这为内容的流动提供了坚实的节奏感。实际上，我.flow现在在每个项目中都会用到这个实用工具。你可以在 24 Ways 上阅读更多相关信息。事实上，我觉得这是我最近用得最多的 CSS。

input,
button,
textarea,
select {
  font: inherit;
}
Enter fullscreen mode Exit fullscreen mode

我终于鼓起勇气，将font: inheritinput 元素设置为默认值，这样一来，它就相当于实现了它的名字。告别细小（某些情况下是单声道）的文本！

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
Enter fullscreen mode Exit fullscreen mode

最后，同样重要的是，如果用户希望减少动效，@media只需一个查询即可重置动画、过渡和滚动行为。我喜欢在重置中采用这种做法，其特异性胜过选择器，因为现在很可能，如果用户不想要动效，那么无论重置后使用什么 CSS，他们都无法获得它。 !important

ℹ️更新：感谢@atomiks，它已更新，因此它不会破坏监视animationend和的JavaScript 事件transitionend。

总结

就是这样，一个小小的重置让我的生活轻松了很多。如果你喜欢它，也可以自己用一下！你可以在GitHub或NPM上找到它。

文章来源：https://dev.to/hankchizljaw/a-modern-css-reset-6p3
Devto 翻译
PREV
独自工作太累了，所以我创建了自己的助手
NEXT
使用 create-react-app 设置 Tailwind