Normalize.css 和 Reset CSS 有啥区别？

Posted 2023-02-21

【中文标题】Normalize.css 和 Reset CSS 有啥区别？

【英文标题】：What is the difference between Normalize.css and Reset CSS?Normalize.css 和 Reset CSS 有什么区别？

【发布时间】：2011-10-16 18:30:21

【问题描述】：

我知道 CSS Reset 是什么，但最近我听说了一个叫做 Normalize.css 的新东西

Normalize.css 和 Reset CSS 有什么区别？

规范化 CSS 和重置 CSS 有什么区别？

这只是 CSS 重置的一个新流行词吗？

【参考方案1】：

Normalize.css

Normalize.css 是一个小的 CSS 文件，它在 html 元素的默认样式中提供跨浏览器的一致性。

这意味着，如果我们查看浏览器应用的样式的 W3C 标准，并且其中一个浏览器存在不一致，normalize.css 样式将修复存在差异的浏览器样式。

但在某些情况下我们无法按照标准修复有问题的浏览器，通常是因为 IE 或 EDGE。在这些情况下，Normalize 中的修复程序会将 IE 或 EDGE 样式应用于其余浏览器。

现实生活中的例子

Chrome、Safari 和 Firefox 呈现 <article>/ <aside>/ <nav>/ <section> 标签内的 <h1> 标签，其字体大小小于独立标签，并且具有不同的边距大小。这些是 Chrome、Safari 和 Firefox 中的用户代理样式，在 <article>/ <aside>/ <nav>/ <section> 内的 <h1> 标签的情况下

标签

:-webkit-any(article,aside,nav,section) h1 
  font-size: 1.5em;
   margin-block-start: 0.83em;
   margin-block-end: 0.83em;
   

示例：

/* 
 Correct the font size and margin on `h1` elements within `section`  and `article` 
 contexts in Chrome, Firefox, and Safari.
 */
  h1   font-size: 2em;  margin: 0.67em 0;

重置 CSS

Reset CSS 采用不同的方法，表示我们根本不需要浏览器的默认样式。无论我们需要什么样式，我们都会根据我们的需要在项目中定义。所以“CSS Reset”会重置浏览器用户代理附带的所有样式。

这种方法在上面的示例中效果很好，对于 <h1> 到 <h6> 的默认样式：大多数时候我们既不需要浏览器的默认 font-size 也不需要浏览器的默认 margin。

这是 CSS 重置的一小部分的示例

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; 

在 CSS 重置方式中，我们将所有 HTML 标签定义为无内边距、无边距、无边框、相同的字体大小和相同的对齐方式。

CSS 重置的问题在于它们很丑：它们有一大串选择器，并且会进行很多不必要的覆盖。更糟糕的是，它们在调试时不可读。

但仍有一些样式我们更喜欢将<h1> 重置为<h6>、<ul>、<li> 等。

【参考方案2】：

Normalize.css ：每个浏览器都带有一些默认的 css 样式，例如，在段落或标题周围添加填充。如果添加规范化样式表，所有这些浏览器默认规则将被重置，因此对于这种情况，标签上的 0px 填充。这里有几个链接了解更多详细信息：https://necolas.github.io/normalize.css/http://nicolasgallagher.com/about-normalize-css/

【参考方案3】：

Normalize.css 主要是一组样式，基于其作者认为看起来不错的样式，并使其在浏览器中看起来一致。重置基本上会从元素中剥离样式，因此您可以更好地控制所有内容的样式。

我两个都用。

一些样式来自 Reset，一些来自 Normalize.css。例如，在 Normalize.css 中，有一种样式可以确保所有输入元素都具有相同的字体，这不会发生（在文本输入和文本区域之间）。重置没有这样的样式，所以输入有不同的字体，这通常是不需要的。

因此，基本上，使用这两个 CSS 文件可以更好地“均衡”所有内容；）

问候！

【讨论】：

这是一个很好、务实的答案。它不一定是其中之一。各取所需。我喜欢完全重置，但 Normalizer 提供了一些很好的点点滴滴，可以很好地在上面运行。

@ricmetalster，那么您是否必须重新编写自己的 css 才能结合 reset.css 和 normalize.css 的功能？

如果你想同时使用这两个，你能不能先列出“reset”然后“normalize”，然后在上面添加你的样式？

我采用“不要想太多”的方法并同时使用这两种方法，并将它们作为我的 SASS 导入 @import '_normalize' && '_reset' 中的includes调用

【参考方案4】：

这个问题已经回答了好几次了，我会为每个问题做一个简短的总结，一个例子和截至 2019 年 9 月的见解：

Normalize.css

- 顾名思义，它在浏览器中为其用户代理

规范化

样式，即由于默认原因，它们在所有浏览器中都相同'略有不同。

示例：默认情况下，<section> 内的 <h1> 标记 Google Chrome 会小于 <h1> 标记的“预期”大小。另一方面，Microsoft Edge 正在制作<h1> 标签的“预期”大小。 Normalize.css 会使其保持一致。

当前状态：npm 存储库显示normalize.css package 目前每周的下载量超过 50 万。 project of the repository 中的 GitHub 星数超过 36k。

重置 CSS

- 顾名思义，它

重置

所有样式，即删除所有浏览器的用户代理样式。

示例：它会执行以下操作：

html, body, div, span, ..., audio, video   
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 

当前状态：它远不如 Normalize.css 受欢迎，reset-css 包显示它每周的下载量约为 26k。 GitHub star 只有 200，从项目的repository 可以看出。

【参考方案5】：

有时，最好的解决方案是同时使用两者。有时，两者都不使用。有时，它是使用一个或另一个。如果你想在所有浏览器中重置所有样式，包括边距和填充，请使用 reset.css。然后自己应用所有装饰和样式。如果您只是喜欢内置样式但想要更多的跨浏览器同步性，即规范化，请使用 normalize.css。但是，如果您选择同时使用 reset.css 和 normalize.css，请先链接 reset.css 样式表，然后（立即）链接 normalize.css 样式表。有时这并不总是哪个更好的问题，而是何时使用哪个更好，何时使用两者，何时不使用两者。恕我直言。

【参考方案6】：

首先reset.css 是您可以使用的最糟糕的库，因为在将边距填充和其他属性的值分配给0 之后，它删除了HTML 的标准结构并将您编写的所有内容都显示为文本。例如，您会发现<H1> 与<H6> 相同。

另一方面，Normalize.css 使用标准结构，也修复了其中存在的几乎所有错误。例如，它解决了将表单从一个浏览器显示到另一个浏览器的问题。 Normalize 通过修改此功能来解决此问题，因此您的元素将在所有浏览器上显示相同。

【讨论】：

取决于您的用例。考虑到您的示例，如果我需要为我的项目修改所有标题标签的字体样式，我真的不会使用默认值，对吗？不应仅仅因为在自己的项目中找不到用途，就将库标记为“最差”。

reset 的主要目的之一是解决浏览器应用样式引起的问题，这非常有用。我也认为它不应该被视为图书馆。

@gdebojyoti 有一些用例，但我很少希望所有标题的大小都相同，无论它们各自的字体样式如何。

【参考方案7】：

重置似乎是满足自定义设计规范的必要条件，尤其是在复杂的非样板类型设计项目中。听起来好像规范化是进行纯 Web 编程的好方法，但网站通常是 Web 编程和 UI/UX 设计规则之间的结合。

【讨论】：

99% 的用例都是多余的。

@Michael 哪个？重置或正常化？ （只是想了解人们对这个问题的想法）

@Bren 重置和标准化。了解每个元素的默认 CSS 值是成为优秀前端开发人员的一部分。我认为它们是不必要的蛮力方法。

@Michael > Knowing the default CSS values for each element is part of being a good front end developer - 这类似于说您宁愿使用电子而不是编程语言，因为这才是优秀的开发人员。有效地使用工具使某人成为优秀的开发人员，反之则通常属于浪费时间的***者

【参考方案8】：

我在 normalize.css 上工作。

主要区别在于：

Normalize.css 保留有用的默认值，而不是“取消样式化”所有内容。例如，sup 或 sub 等元素在包含 normalize.css 后“正常工作”（并且是实际上变得更健壮），而在包含 reset.css 之后，它们在视觉上与普通文本无法区分。因此， normalize.css 不会强加给您一个视觉起点（同质性）。这可能不符合每个人的口味。最好的办法是同时试验两种凝胶，看看哪种凝胶符合您的喜好。

Normalize.css 更正了一些超出 reset.css 范围的常见错误。 它比 reset.css 范围更广，并且还针对常见问题提供错误修复，例如： HTML5 元素的显示设置、表单元素缺少font 继承、更正pre 的font-size 渲染、IE9 中的SVG 溢出以及ios 中的button 样式错误。

Normalize.css 不会弄乱您的开发工具。 使用 reset.css 时的一个常见问题是浏览器 CSS 调试工具中显示的大型继承链。由于有针对性的样式，这不是 normalize.css 的问题。

Normalize.css 更加模块化。 该项目被分解为相对独立的部分，如果您知道它们会删除部分（如表单规范化），则可以轻松删除它们您的网站永远不需要。

Normalize.css 有更好的文档。 normalize.css 代码在GitHub Wiki 中有更全面的内联文档。这意味着您可以了解每行代码的作用、包含它的原因、浏览器之间的差异，并更轻松地运行您自己的测试。该项目旨在帮助人们了解浏览器默认如何呈现元素，并使他们更容易参与提交改进。

我在about normalize.css的文章中对此进行了更详细的描述

【讨论】：

很多时候，您不会将它们保持为零（使用重置时），因此您实际上编写的代码更少。如果您确实想将某些值归零，那么该样式将与它所针对的元素耦合，并且应该易于调试。

这对于许多重置来说是一个严重的问题，包括将所有内容归零也会减慢浏览器的速度。

这也是重置的优势 - 正常化未命中大小问题，如下所示：github.com/yahoo/pure/issues/395

当我认为，是的，通常你不希望填充和边距为零时，我是否错过了这一点，但是，不，你也不希望默认值？

就我个人而言，我已经关闭了 Normalize，尽管我仍然使用它。这里的很多观点都被夸大了（更好的文档......？）。 Normalize 是固执己见的，所以它确实给你强加了一个视觉起点（尽管这个答案说了什么）。它也可能变得过时。 Reset.css 使用后永远不会过时。与您能想到的任何其他数字相比，您更可能希望边距和填充为 0，因此在开发时重置所有内容实际上很有帮助。然而，规范化对浏览器问题有好处，这是我使用它的主要原因。

【参考方案9】：

主要区别在于：

CSS 重置旨在删除所有内置浏览器样式。 H1-6、p、strong、em 等标准元素最终看起来完全一样，根本没有任何装饰。然后你应该自己添加所有装饰。

Normalize CSS 旨在使内置浏览器样式在浏览器之间一致。像 H1-6 这样的元素将在浏览器中以一致的方式显示为粗体、更大等等。然后，您应该只添加设计需要的装饰差异。

如果您的设计 a) 遵循排版等的通用约定，并且 b) Normalize.css 适用于您的目标受众，那么请使用 Normalize.CSS 而不是CSS 重置将使您自己的 CSS 更小更快编写。

【讨论】：

@Jitendra Vyas：——实际上只有一种方法：阅读注释良好的 Normalize.CSS 代码，然后确定它是否适合您的需求。 github.com/necolas/normalize.css/blob/master/normalize.css

另一个注意事项：Normalize.css 旨在尽可能不显眼，这允许开发人员更轻松地编写他们的代码，而不必与特异性冲突作斗争。

所以可以说我想在开发时使用重置。一旦完成，我想要 normalize.css 或一些 JS 来获取我没有改变的所有东西，并且在浏览器中是相同的。或者我已经改变并且在改变之后它们已经变得与浏览器中的相同并为客户端删除它们。因此，在更快的客户端开发该“程序”时，重置将有所帮助。双方皆大欢喜。还有更聪明的生活方式。

实际上你最终会覆盖所有 Normalize 的样式。理论很棒，但在这个 OOCSS 世界中，它在实践中从来没有这样工作过。

【参考方案10】：

从它的描述来看，它似乎试图使用户代理的默认样式在所有浏览器中保持一致，而不是像重置那样剥离所有默认样式。

保留有用的默认值，与许多 CSS 重置不同。

【讨论】：

那么使用 Normalize css 比 Reset 更好吗？

@Jitendra Vyas — 不。这些工具是不同的，没有比彼此更好或更差。选择最能帮助您解决问题的那个。

我不得不说规范化是比重置更好。这将减少通过网络传输的 CSS，更好地使用 UA 默认值，以及更好地理解元素的意味着如何显示。