前言
在网页设计与开发中，样式表是一个非常重要的部分。它可以让网页变得更美观、更易读、更易用，也可以帮助开发者提高工作效率。所以，选择好样式表对于一个项目的成功至关重要。
在开始使用样式表前，有两个常见的选择：Reset CSS 与Normalize.css。这两个解决方案都有各自的优缺点，在正式选择之前，需要了解它们各自的特点。
前端样式表的弊端
在开始之前，我们先来了解一下前端样式表存在的一些弊端。
由于浏览器间存在差异，而不同的浏览器会默认展示不同的样式，这使得网页设计师在设计完整站点的样式之后，需要考虑的问题是，如何解决不同浏览器间的差异。
当然，这种问题还有很多的解决方案。其中，必须避免一种方法，那就是为每种排版组合单独编写样式表。这个做法会导致一个问题，就是会增加样式表的大小，会影响页面的加载速度。
这种类型的问题可以通过使用其他的技术来解决。这种方法很简单，就是为网站选择一个可靠的样式表。
解决方案
现在我们来介绍两个解决方案：Reset CSS 和 Normalize.css。这两个 CSS 库的作用非常相似，他们都是消除不同浏览器的样式差异，从而使得网站的展现更加一致。
Reset CSS
Reset CSS 的作用是消除浏览器的样式差异，从而保证网站可以在所有浏览器中呈现出一致的样式。Reset CSS 通常会通过重置所有元素的默认样式来实现这一目的。这意味着，Reset CSS 会从零开始，自己定义每一个元素的样式。
使用 Reset CSS 的好处是，它能够确保所有的页面元素都不会受到浏览器默认样式的影响。
然而，缺点也显而易见。Reset CSS 可能会破坏某些页面的可访问性，因为它会重置所有元素的样式，包括表单元素、标题、段落、链接等等，这些元素在保持默认样式时，通常是可以实现良好的可访问性的。
下面是一个 Reset CSS 的示例：
----- ----- --- --- --- --- --- --- --- --- --- -- ----------- ---- ----- --------- ------- ------ --------- ------- ------- --------- ------- --- --- - ------- -- -------- -- ------- -- - ------ ------ ------ ------ --- --- -- - ------- -- -------- -- ------- ----- ---------------- --------- --------------- -- -
Normalize.css
Normalize.css 的目标是让不同浏览器都保持一致的样式表现，同时保留访问性，并强调了各元素自己默认的语义化。Normalize.css 的核心理念是把样式表重置为浏览器默认样式之前，先考虑到每个浏览器自己的默认样式。对于一些公共元素，其默认样式会被重置为一致的样子。利用这些样式，Normalize.css 可以为每个元素提供比默认样式更好的一些样式。这使得针对某些特定元素进行样式规定变得更加简单。
和 Reset CSS 的思想不同，Normalize.css 重设的规定仅仅修复了一些浏览器的默认样式，而不是将所有元素的样式都从零开始定义。对于一些页面元素，Normalize.css 的规定可能只使用了一个选择器，而且其重置规则一般比 Reset CSS 的简单。
另外，Normalize.css 支持响应式网页设计。它包含了一些媒体查询，这些都是可以帮助开发者针对各种设备进行响应式布局，从而使得网站更适合各种屏幕尺寸的设备。
下面是一个 Normalize.css 的示例：
---- - ------------ ----------- ------------ ----- ------------------------- ----- ---------------------------- ------- -- -- --- - ---- - ------- -- - ---- - -------- ------ - -- - ---------- ---- ------- ------ -- - -- - ----------- ------------ ------- -- --------- -------- - -- ---- --
结论
不同的 CSS 库都有不同的优缺点，所以在选择的时候要权衡它们各自的特点。如果您需要一个非常干净的页面并且您的界面风格较独特，您可能需要使用 Reset CSS。如果您希望通过消除不同浏览器样式间的差异，使得您的样式表更加标准化并且适配性更好，那么您可以看一看 Normalize.css。
最后，值得注意的是，对于大多数项目来说，使用 Reset CSS 和 Normalize.css 都是可以的。只需要根据自己的具体情况选择一个适合自己的方案即可。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6709d873d91dce0dc87c5cbf