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

705

我在normalize.css上工作。

的主要区别是：

Normalize.css保留使用默认值，而不是 “unstyling” 的一切。例如，像sup或sub这样的元素在包含normalize.css（并且实际上变得更健壮）之后“正常工作”，而在包含reset.css之后，它们在视觉上与普通文本没有区别。所以，normalize.css并没有在你身上强加一个视觉起点（同质化）。这可能不符合每个人的口味。最好的做法是对两者进行试验，并根据您的偏好查看哪些凝胶。
Normalize.css更正了reset.css超出范围的一些常见错误。它具有比重置范围更广的范围。CSS，并且还提供了像常见的问题的错误修正：对于HTML5元素，缺乏font继承由形式元素的显示设置，校正font-size渲染为pre，SVG溢出IE9，并在IOS的button造型错误。
Normalize.css不会弄乱你的开发工具。使用reset.css时常见的问题是浏览器CSS调试工具中显示的大型继承链。由于有针对性的风格，这对normalize.css来说不是这样的问题。
Normalize.css是更加模块化。该项目被分解为相对独立的部分，如果您知道这些部分永远不会被您的网站所需，那么您可以轻松地删除部分（如表单规范化）。
Normalize.css有更好的文档。 normalize.css代码在内部以及在GitHub Wiki中更全面地记录。这意味着你可以找出每一行代码在做什么，为什么包含它，浏览器之间有什么区别，更容易运行你自己的测试。该项目旨在帮助教育人们如何默认浏览器呈现元素，并使他们更容易参与提交改进。

我写的更详细的关于这方面的文章about normalize.css

来源

2011-12-02 14:13:47 necolas

+18

很多时候，你不要把它们留在零（当使用重置时），所以你实际上编写的代码更少。如果你确实想要将某些值清零，那么这种风格就与它所指向的元素相结合，并且应该能够减轻调试的负担。 – necolas

+8

而这是一个重要的问题，许多重置，其中包括一切事实，也放慢了浏览器。 – Rob

+4

而且这也是重置的优势 - 规范化错失大小问题，如下所示：https://github.com/yahoo/pure/issues/395 –

5

从描述中可以看出，它试图使用户代理的默认样式在所有浏览器中保持一致，而不是像重置一样去除所有默认样式。

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

来源

2011-07-31 03:21:26 dbb

+0

所以最好是使用Normalize css over Reset？ –

+3

@Jitendra Vyas - no。这些工具是不同的，不是彼此更好或更差。选择一个能够帮助你解决你最好的问题的人。 – Quentin

+7

我不得不认为规范化*比重置要好。这将导致更少的CSS通过线路传输，更好地使用UA默认值，并且更好地理解元素是如何显示的。 –

212

的主要区别在于：

CSS重置旨在删除所有内置浏览器的造型。像H1-6，p，strong，em等标准元素看起来完全一样，完全没有装饰。你应该自己添加所有装饰品。
Normalize CSS旨在使跨浏览器的内置浏览器样式一致。诸如H1-6之类的元素将在浏览器中以一致的方式显示为粗体，大小等等。然后，您应该只添加差异您的设计需要的装饰。

如果你的设计一）遵循排版等等，并B） Normalize.css适用于您的目标受众，然后使用，而不是一个CSS复位Normalize.CSS会让自己常用惯例CSS写得更小更快。

来源

2011-08-01 10:06:28

+0

+1请详细描述最后一段的情景 –

+6

@Jitendra Vyas：您的前端开发人员 - 实际上只有一种方法：阅读备受好评的Normalize.CSS代码，并决定它是否适合您是否需要。 https://github.com/necolas/normalize.css/blob/master/normalize.css –

+0

另一个注意事项：Normalize.css旨在尽可能不显眼，这使得开发人员可以更轻松地编写自己的代码，而无需针对特定冲突。 – zzzzBov

35

Normalize.css的主要是一组样式，基于它的作者以为会很好看，并使它看起来对面一致浏览器。重置基本上从元素剥离样式，所以你可以更好地控制一切的样式。

我使用两者。

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

所以bascially，使用两个CSS文件做一个更好的工作 '均衡' 的一切;）

的问候！

来源

2012-06-01 00:32:16 ricmetalster

+1

这是一个很好的，实用的答案。它不一定是一个或另一个。采取你想要从每个。我喜欢完全重置，但是Normalizer提供了一些很好的功能，可以在ontop上运行。 – Undistraction

+3

@ricmetalster，所以你必须重新编写自己的CSS来结合reset.css和normalize.css的功能吗？ – ayjay

+1

如果你想同时使用，你可以先列出“重置”，然后“正常化”，然后在上面添加你的样式？ – Craig

5

复位似乎是一个必然以满足定制设计规范，特别是在复杂的，非样板式的设计项目。听起来好像标准化是继续进行纯粹的Web编程的好方法，但通常网站是Web编程和UI/UX设计规则的结合。

来源

2014-01-07 17:13:11 user3170099

+0

这对99％的用例来说是过量的。 – Michael

+0

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

+1

@Bren都重置并正常化。了解每个元素的默认CSS值是成为一名优秀的前端开发人员的一部分。我把它们看作是不必要的蛮力方法。 – Michael

5

第一个reset.css是您可以使用的最差的库，因为它会在为0分配边距填充和其他属性的值之后，删除HTML的标准结构并显示您以书面形式编写的所有内容。因此，例如，您会发现<H1>将与<H6>相同。

在另一方面Normalize.css使用标准的结构，还修复了几乎所有现有的在它的错误。例如，它修复了从一个浏览器向另一个浏览器显示表单的问题。 Normalize通过修改此功能来修复此问题，以便您的元素在所有浏览器上显示相同。

来源

2016-07-23 11:59:32

+0

取决于您的使用案例。考虑你的例子，如果我需要为我的项目修改所有标题标签的字体样式，我将不会使用任何默认值，对吗？一个人不应该因为在自己的项目中找不到用途而将库标记为“最差”。 – gdebojyoti

+0

重置的主要目的之一是解决浏览器应用样式中出现的问题，这非常有用。我也认为它不应该被视为一个图书馆。 –

+0

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

0

有时，最好的解决方案是使用两者。有时候，它既不使用也不使用。有时候，这是使用其中一种。如果您想要所有样式（包括所有浏览器中的边距和填充重置），请使用reset.css。然后自己应用所有装饰和造型。如果您只是喜欢内置的样式，但想要更多的跨浏览器同步性，即标准化，请使用normalize.css。但是，如果您选择使用reset.css和normalize.css，请先链接reset.css样式表，然后再立即链接normalize.css样式表（立即）。有时候并不总是一个更好的问题，但是何时使用哪一个与什么时候使用两个时间以及什么时候使用两个都没有关系。恕我直言。

来源

2017-09-22 20:18:40

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

回答

相关问题