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

565

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

标准化CSS和重置CSS有什么区别？

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

css normalize-css

— Jitendra Vyas
source

800

我在normalize.css上工作。

主要区别在于：

Normalize.css保留有用的默认值，而不是“取消样式化”所有内容。例如，在包含normalize.css之后，诸如sup或sub“正常工作”的元素（实际上变得更健壮），而在包含reset.css之后，它们在视觉上与普通文本没有区别。因此，normalize.css不会对您施加视觉起点（同质性）。这可能并不符合所有人的口味。最好的办法是对两者进行试验，并查看哪种凝胶符合您的偏好。
Normalize.css纠正了reset.css超出范围的一些常见错误。它具有比reset.css更大的范围，并且还针对以下常见问题提供了错误修复：HTML5元素的显示设置，缺少font表单元素的继承，更正了font-size呈现pre，IE9中的SVG溢出以及buttoniOS中的样式错误。
Normalize.css不会使您的开发工具混乱。使用reset.css时，常见的问题是浏览器CSS调试工具中显示的较大的继承链。由于有针对性的样式，因此normalize.css并不是这样的问题。
Normalize.css更具模块化。该项目分为相对独立的部分，如果您知道网站永远不需要这些部分，则可以轻松地删除这些部分（例如表单规范）。
Normalize.css具有更好的文档。内联记录了normalize.css代码，并在GitHub Wiki中进行了更全面的记录。这意味着您可以找出每一行代码的作用，包含代码的原因，浏览器之间的区别以及更轻松地运行自己的测试。该项目旨在帮助人们了解浏览器默认情况下如何呈现元素，并使他们更容易参与提交改进。

我在有关normalize.css的文章中对此进行了更详细的介绍

— 尼古拉斯
source

19

通常，您不会将它们设置为零（使用reset时），因此实际上您在编写更少的代码。如果您确实想将某些值归零，则该样式将与它所要使用的元素耦合，并且应该简化调试。

— necolas 2011年

8

而且这是许多重置的重要问题，包括将所有内容清零也会降低浏览器的速度。

— 罗布2012年

4

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

— Daniel Sokolowski

4

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

— guioconnor

9

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

— Chuck Le Butt

254

主要区别在于：

CSS重置旨在删除所有内置的浏览器样式。H1-6，p，strong，em等标准元素最终看起来完全相似，根本没有装饰。然后，您应该自己添加所有装饰。
Normalize CSS旨在使内置的浏览器样式在各浏览器之间保持一致。H1-6之类的元素将在浏览器中以一致的方式显示为粗体，较大等。然后，您应该只添加设计需要的装饰差异。

如果您的设计a）遵循版式和其他方面的通用约定，并且b） Normalize.css适用于您的目标受众，则使用Normalize.CSS而不是CSS重置将使您自己的CSS更小，更快地编写。

— 杰斯珀·M
source

6

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

— Jesper M，

另一个注意事项：Normalize.css的目标是尽可能不打扰，这使开发人员可以更轻松地编写其代码，而不必解决特异性冲突。

— zzzzBov 2011年

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

— 穆罕默德·乌默（Um Muhammad Umer），2013年

在实践中，无论如何您最终都会覆盖所有Normalize的样式。理论是很棒的，但是在这个OOCSS世界中，它在实践中从来没有这样工作。

— Chuck Le Butt

40

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

我都用。

Reset中的某些样式，Normalize.css中的一些样式。例如，在Normalize.css中，有一种样式可以确保所有输入元素都具有相同的字体（在文本输入和文本区域之间）不会出现。重置没有这种样式，因此输入通常使用不同的字体。

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

问候！

— ricmetalster
source

1

这是一个很好的，务实的答案。不一定是一个。从每个想要的东西。我喜欢完全重置，但是Normalizer提供了一些不错的功能，可以很好地在顶部运行。

— 2012年

3

@ricmetalster，因此是否必须重新编写自己的CSS才能将reset.css和normalize.css的功能组合在一起？

— 2014年

2

如果您想同时使用两者，可以先列出“重置”然后列出“规格化”，然后再添加样式吗？

— 克雷格（Craig）

我采用“不要过度思考”的方法，并同时使用两者，并在我的SASS导入文件中将其称为@import'_normalize'&&'

— reset'– killscreen

6

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

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

— N·艾尔赛德
source

1

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

— Debojyoti Ghosh

重置的主要目的之一是解决由于浏览器应用样式而引起的问题，这非常有用。我也认为不应将其视为图书馆。

— 艾萨克·帕克

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

— James Beninger

5

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

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

— dbb
source

因此，最好在重置时使用Normalize CSS？

— Jitendra Vyas

3

@Jitendra Vyas —不。这些工具是不同的，彼此之间并没有好坏之分。选择一个可以帮助您解决最困难的问题。

— 昆汀

8

我会认为，标准化是比复位更好。这将导致更少的CSS跨线，更好地利用UA默认值，并更好地了解内容是如何被转移意味着显示器。

— Ryan Kinal

5

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

— 用户名
source

这是99％用例的过大杀伤力。

— 2014年

@Michael是哪一个？重置还是规范化？（只是试图了解人们

— 对此

1

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

— 迈克尔·迈克

4

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

— nicholaswmin

1

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

— 肖恩·坦克·加维
source

0

这个问题已经被回答了好几次了，我将为每个简短的摘要，一个示例和截至2019年9月的见解：

Normalize.css-顾名思义，它可以标准化浏览器中其用户代理的样式，即由于默认情况下它们稍有不同，因此使它们在所有浏览器中都相同。

例如：<h1>标签内<section>默认谷歌浏览器会做出比的“预期”尺寸更小<h1>的标签。另一方面，Microsoft Edge正在使<h1>标签的“预期”大小。Normalize.css将使其一致。

当前状态：npm存储库显示normalize.css软件包当前每周有超过50万次下载。存储库项目中的 GitHub star 超过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的星星只有200个。

— 丹尼尔·丹尼尔克基（Daniel Danielecki）
source