重启、重置和推理

前几天我在 Nicholas Cerminara 的一篇文章 中看到（访问该链接时请注意，看起来他们有一些 跟踪脚本运行失控），Bootstrap 4 集成了一种新的 CSS 重置，他们称之为 Reboot

Reboot，一个包含单个文件中特定元素 CSS 更改的集合，启动 Bootstrap 以提供一个优雅、一致和简单的基础来构建。

如果您是 CSS 开发的新手，那么 CSS 重置的整个理念就是解决不同浏览器之间的样式不一致问题。例如，我刚刚在一个页面上放置了一个 <button>，没有任何其他样式。Chrome 应用了 padding: 2px 6px 3px; - Firefox 应用了 padding: 0 8px;。CSS 重置将为该元素应用新的 padding，以便所有浏览器在应用的内容上保持一致。有很多类似的例子。

顺便说一下历史……

2007 年，Jeff Starr 汇总了 许多不同的 CSS 重置。最早的一个是 Tantek Çelik 的 undohtml.css（这是指向源代码的直接链接）。我们可以看到它背后的目的是去除默认样式。

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

迄今为止，最流行的重置是在不久之后出现的：Meyer 重置。它包含的内容与 Tantek 的不同（它甚至更新了一些 HTML5 元素），但精神相同：删除默认样式。您可能会认出这段著名的代码块，它会出现在您 DevTools 样式面板的各个地方

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

从像这样的重置开始（在您的生产样式表顶部），您之后编写的样式将建立在稳定的基础之上。

几年后，随着 HTML5 变得更加实用，像 Richard Clark 的 HTML5 重置 变得流行起来。它仍然是 Meyer 重置的修改版本，并且保留了那种精神。

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

贯穿始终，有很多开发人员通过仅仅消除所有内容的边距和填充并将其保留在原处来实现最小化

* {
  padding: 0;
  margin: 0;
}

愚蠢的琐事：CSS-Tricks 的徽标灵感来自通用选择器和那个想法。

Normalize.css 出现了……

Normalize.css 代表了 CSS 重置应该做什么的精神上的第一次有意义的转变。这在我看来是如此的不同

• 它对所有可能在不同浏览器中以不同方式设置样式的内容进行了新的评估，并解决了所有这些问题。在旧的 CSS 重置只有几行代码的情况下，未压缩且有文档的 normalize 有 447 行。
• 它没有从已经在不同浏览器之间保持一致的元素中删除任何样式（在大多数情况下）。例如，Normalize 中没有针对 h2-h6 元素的任何内容，只有一个针对奇怪的 h1 问题的修复。这意味着您不会消除标题层次结构，默认样式将保留。
• 它更能适应修改的想法，而不仅仅是包含它。例如，有一个专门用于 <pre> 标签的部分，其中一行设置了它的 font-family。您可以将其更改为您想要的字体系列，它将同样有效地进行重置。

代码读起来令人满意，因为它解释了它在做什么，而不会陷入细节

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

今天 Normalize 已经到了 7.0.0 版本，并且拥有超过 30,000 个 GitHub 星标。它非常受欢迎。

所以……重置可以有主见吗？

我们已经看到了 CSS 重置的许多不同版本，并且看到了方法上的根本转变，因此我认为可以公平地说，CSS 重置可以采取有主见的态度。

让我们考虑一些方法……

• 重置是否触及每个可能的元素？还是一部分元素？它如何决定触碰哪些元素，不触碰哪些元素？
• 更改了哪些属性？只有跨浏览器差异的属性？还是其他标准，例如需要更改的其他元素的相似性？以一致性和效率的名义，将属性应用于没有跨浏览器问题的元素是否可以？
• 您是否尝试保留用户代理样式表的精神？合理的默认值？
• 您是否应用了任何没有跨浏览器问题的属性，这些属性可以被认为有利于“重置”，例如排版默认值或 box-sizing？
• 您是否包含用于常见需求的“工具箱”类？还是将其留给其他项目处理？
• 您是否关心它的尺寸？
• 您是否使用预处理器或任何其他工具？

看看 Vanilla CSS Un-Reset。这里有很多意见，首先是它旨在在使用重置取消元素样式后重新设置元素样式的想法。它以 pt 设置了 body 字体大小，设置了一个非常具体的等宽字体堆栈，包括一个 ol ol ol ol 选择器，一个 clearfix 和对齐辅助类。这里没有评判。人们创建事物来帮助解决他们自己的问题，我相信这对创建者很有帮助。但我们可以看到意见在那里闪耀。

现在看看 MiniReset.css。非常不同！它确实清除了类型样式“以便使用语义标记不会影响样式”，但有意保留了一些默认样式“以便按钮和输入保留其默认布局”，加入了一些没有跨浏览器问题但全局有用的内容（box-sizing），并添加了一些小的响应式设计辅助程序。

那里完全不同的观点集。

Jonathan Neal 创建了一个名为 santize.css 的重置，它非常清楚它的观点。在 源代码 中搜索“opinionated”一词，您会看到它出现了 19 次。所有这些都是 Jonathan 基于研究和看似现代最佳实践做出的选择，毫无疑问，还融入了他自己对重置中应该包含什么的需求和愿望。

/*
 * Remove the text shadow on text selections (opinionated).
 * 1. Restore the coloring undone by defining the text shadow (opinionated).
 */

::-moz-selection {
	background-color: #b3d4fc; /* 1 */
	color: #000000; /* 1 */
	text-shadow: none;
}

::selection {
	background-color: #b3d4fc; /* 1 */
	color: #000000; /* 1 */
	text-shadow: none;
}

“重置”一词

就我个人而言，我认为将所有这些都放在同一个总称下并了解其哲学差异很有用。但是，Normalize 有意地将自己分开

CSS 重置的现代、支持 HTML5 的替代方案

Sanitize 自称是一个 CSS 库，除了引用 Meyer 重置之外，在任何地方都不使用“重置”一词。

重启

Reboot 很有趣，因为它可能是这个领域最新的参与者。它的文件历史可以追溯到 2015 年，这可能与 Bootstrap 4 在 Bootstrap 3 发布后需要一段时间才发布有关。Reboot 没有自己的存储库，它是 Bootstrap 的一部分。这是 直接文件 和 文档。

他们思考的方式很有趣

Reboot 在 Normalize 的基础上构建，为许多 HTML 元素提供了仅使用元素选择器的某种有主见的样式。其他样式仅使用类来完成。例如，我们重启了一些 <table> 样式以获得更简单的基线，然后提供 .table、.table-bordered 等。

您可以拥有一个执行样式的类，但是如果您使用重置，则不必用处理跨浏览器一致性问题的重置样式来重载该类。

//
// Tables
//

table {
  border-collapse: collapse; // Prevent double borders
}

caption {
  padding-top: $table-cell-padding;
  padding-bottom: $table-cell-padding;
  color: $text-muted;
  text-align: left;
  caption-side: bottom;
}

th {
  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
  // closest parent with a set `text-align`.
  text-align: inherit;
}

它绝对是有主见的，但以一种与 Bootstrap 完美结合的方式。它被埋藏在 Bootstrap 中的事实是一个很好的信号，表明它专为那个世界而设计，而不是任何项目的即插即用方案。也就是说，我尽力 在这里编译了一个简单的 CSS 版本。

根据浏览器支持定制重置

只要我们谈论重置的过去和未来，就值得再次提到 Browserslist，它是一种用于声明项目支持哪些浏览器/版本的标准化格式。

可以这样构建重置，使其包含的内容知道它们存在的原因。确切地说，它存在是为了支持哪个浏览器和版本。然后，如果 browserslist 配置表示此项目无论如何都不支持该特定浏览器，则可以删除该 CSS。

这就是 PostCSS Normalize 的作用。