当编写 CSS 样式时，我们可能会遇到一些浏览器兼容性的问题。不同的浏览器可能会对同一样式表达出不同的效果，这就导致了网站在不同浏览器上显示的效果不同，造成了不必要的麻烦。为了解决这个问题，一些前端工程师创建了 CSS Reset 和 Normalize.css 两个工具，这两者都是用来消除浏览器默认样式的，然而二者之间还是有差别的。
CSS Reset 是什么？
CSS Reset 是一个可以重置浏览器默认样式的文件。它通过移除浏览器默认样式来确保在不同浏览器上呈现相同的样式效果。它的本质是把元素的默认样式全部重置为一致的，这样就可以保证各个浏览器呈现的界面效果相同了。
以下是一个简单的 CSS Reset 样例代码：
-- -------------------- ---- ------- -- ----- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- - -- --- --------- --- --展开代码
在这个样例中，我们使用了全局通配符（*）来选中所有 HTML 元素。然后设置这些元素的 margin、padding、border、outline 以及 font-size 属性为默认值（0 和 100%）。通过这样的方式，这个 CSS Reset 文件便可以移除浏览器默认样式。不过这种方式有一个缺点，就是有些元素的默认样式是重要的（比如文本输入框的边框和背景），因此可能会出现意想不到的问题。
Normalize.css 是什么？
与 CSS Reset 不同，Normalize.css 不是将所有元素设定为相同的样式。它的本质是将不同浏览器默认样式之间的差异统一化，这样就可以保证不同浏览器在呈现同种元素时具有相同的效果。此外，Normalize.css 还提供了一些针对性的样式，比如处理 HTML5 元素、修复浏览器各自的 bug 等等。
以下是一个简单的 Normalize.css 样例代码：
/* Normalize */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* ... CSS规则省略 ... */
可以看到，这份 Normalize.css 文件非常短，这是因为 Normalize.css 只修复了像 font-size 这样的具体问题，而不是将所有 CSS 属性都设定为相同的或者更改默认样式。这样就可以确保 Normalize.css 对网站的影响较小，更能保证网站的原本设计风格得以保留。
比较 CSS Reset 和 Normalize.css
我们来对这两种方式做一个比较。
1. 代码量
Normalize.css 比 CSS Reset 更小，因此更容易集成到我们的项目中。由于 Normalize.css 只重置了一些有问题的浏览器默认样式，而不是所有的，因此它所提供的代码量更少，这正是它比 CSS Reset 长处之一。
2. 兼容性
CSS Reset 和 Normalize.css 这两种工具都可以处理浏览器之间的兼容性问题。但是，CSS Reset 会去除一些元素的关键样式，导致在我们减轻了一个问题之后产生了新的问题。而 Normalize.css 比较聪明，只处理浏览器默认行为和 bug，使得页面在不同浏览器上具有一致的表现，很好的解决了这个问题。
3. 粒度
对于不同的项目，需要的定制化 style 可能也不同，Normalize.css 固然有一些默认的样式做基础适配，但是对于一些特殊情况还需要额外开发针对性样式，比如 HTML5 元素的适配处理。
4. 项目样式风格
使用 CSS Reset 可以为您的项目提供一个全新的起点，但是可能回避不了整体风格架构的设计，可能需要额外开发同样的框架和统一规则，造成不必要的麻烦。
Normalize.css 相对较少的重置和修补仅仅针对浏览器特定问题，并且使得样式开发更加方便快捷。同时您可以不需要对您的样式直接采用 Normalize.css，强制样式重置可能会破坏已有的样式或渲染某些 web 应用程序在不同平台之间的可视化一致性。
如何选择
以上是对 CSS Reset 和 Normalize.css 的对比分析。那么，如何选择他们？以下是一些选择建议：
1. 选择 CSS Reset 如果：
- 您需要完全控制样式。
- 您想要构建一套全新的样式库。
- 您知道项目里所有的样式，并且希望能最终呈现相同的样式效果。
2. 选择 Normalize.css 如果：
- 您需要一个轻量、文档化并且易于理解的项目。
- 您需要快速开发项目而不是花费时间构建你自己的定制样式库。
- 您想要一个弹性且易于维护的工具。
- 您需要轻量且兼容所有主流浏览器的样式表。
总之，Normalize.css 与 CSS Reset 两个工具都提供了优秀的解决浏览器兼容性问题的方法，您需要选择那种对您的项目最适合的方案。
示例代码
以下是一个包含 Normalize.css 的示例代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------- --- --------------- ----- ---------------- -------------------------------------------------------------------------------- ------- -- --- ---- ------ ------ ---- -- -------- ------- ------ ---------- ----------- ------- -- -- ------- -- ----- ------------------ ------- -------展开代码
以下是一个包含 CSS Reset 的示例代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- ----- --------------- ------- -- ----- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- - -- --- ---- ------ ------ ---- -- -------- ------- ------ ---------- ----------- ------- -- -- ------- -- ----- --- ---------- ------- -------展开代码
在实际开发中，如果选择 CSS Reset，请放心使用，毕竟它跟随 html 原生元素定义，总能给你满意的结果；如果选择 Normalize.css，则要加深对样式规范的理解，维护时留心可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b73f13306f20b3a640473d
