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

Question

我知道什么是CSS Reset,但最近我听说过这个名为Normalize.css的新东西

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

它只是CSS重置的新热门词吗？

Answer 1

我在normalize.css上工作.

主要区别是:

Normalize.css保留有用的默认值而不是"unstyling"所有内容.例如,在包括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的文章中更详细地写了这篇文章

通常,您不会将它们置于零(使用重置时),因此您实际上编写的代码较少.如果您确实想要将某些值清零,那么该样式将与其所针对的元素耦合,并应简化调试. (18认同)
这对于许多重置来说都是一个重大问题,包括将所有内容归零也会减慢浏览器的速度. (8认同)
就个人而言,我已经离开了Normalize,虽然我仍然使用它.这里有很多要点太夸张了(更好的文档......？).标准化是固执的,所以它确实给你一个视觉起点(尽管这个答案说的是).它也可能变得过时.使用后,Reset.css永远不会过时.并且你更有可能希望边距和填充比你能想到的任何其他数字都要小,所以在你开发时重置一切实际上是有帮助的.然而,Normalize适用于浏览器问题,这是我使用它的主要原因. (8认同)
这也是重置的优势 - 规范化错过这样的大小问题:https://github.com/yahoo/pure/issues/395 (4认同)
我是否想到这一点,是的,通常你不希望填充和边距为零,但是,不,你不想要默认值？ (3认同)

Answer 2

主要区别在于:

CSS重置旨在删除所有内置浏览器样式.标准元素如H1-6,p,strong,em等等最终看起来完全相同,完全没有装饰.然后你应该自己添加所有装饰.
Normalize CSS旨在使各种浏览器内置的浏览器样式保持一致.像H1-6这样的元素在浏览器中会以一致的方式显示为粗体,更大等等.然后,您应该只添加您的设计需求的装饰差异.

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

@Jitendra Vyas:您的前端开发人员 - 实际上只有一种方法:阅读评论良好的Normalize.CSS代码,并确定它是否适合您的需求.https://github.com/necolas/normalize.css/blob/master/normalize.css (6认同)

Answer 3

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

我用两个.

重置的一些样式,一些来自Normalize.css.例如,从Normalize.css开始,有一种样式可以确保所有输入元素都具有相同的字体,而不会出现(在文本输入和textareas之间).重置没有这样的样式,因此输入有不同的字体,通常不需要.

所以基本上,使用两个CSS文件可以更好地"均衡"所有内容;)

问候!

@ricmetalster,你是否必须重新编写自己的css才能结合reset.css和normalize.css的功能？ (3认同)
如果你想同时使用两者，你能先列出“重置”然后“规范化”然后在上面添加你的样式吗？ (3认同)
这是一个很好的、务实的答案。它不一定是其中之一。各取所需。我喜欢完全重置，但 Normalizer 提供了一些很好的零碎部分，可以很好地在上面工作。 (2认同)

Answer 4

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

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

Answer 5

重置似乎是满足定制设计规范的必要条件,特别是在复杂的非样板式设计项目中.听起来似乎规范化是一种很好的方式来进行纯粹的网络编程,但网站通常是Web编程和UI/UX设计规则之间的联姻.

@Michael>`知道每个元素的默认CSS值是一个好的前端开发人员的一部分 - 这类似于说你宁愿使用电子而不是编程语言,因为这是一个优秀的开发人员.有效地使用工具可以使某人成为一个好的开发者,反过来通常属于浪费时间的狂热者 (3认同)

Answer 6

首先reset.css是你可以使用的最差的库,因为它删除了HTML的标准结构,并在将margin填充和其他属性的值赋给后显示你作为文本编写的所有内容0.例如,你会发现<H1>,将会是一样的<H6>.

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

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