CSS Reset 是一种常用的清除默认样式，规范浏览器样式表的操作。它的作用是让各个浏览器更加统一地显示相同的 HTML 元素样式，同时让开发者更方便地编写自己的样式代码。本篇文章将会介绍一些最常见和最全面的 CSS Reset 解决方案库，并对它们的优缺点进行评价和对比，帮助读者选择适合自己的方案。
什么是 CSS Reset？
在 Web 开发中，不同的浏览器和操作系统对 HTML 元素的默认样式表现不尽相同，这会对前端开发带来不必要的困扰。例如，<p> 标签在部分浏览器中会自动添加上下边距，在某些其他浏览器中则不会。CSS Reset 的目的就是在开发之前，先将所有元素的默认样式表现清除掉，从而避免这种情况带来的不好后果。
CSS Reset 的实现方式
在 Web 开发中，我们可以通过 CSS 预处理器或者写纯 CSS 的方法实现 CSS Reset。现有的 Reset 方案数量极多，并且各有千秋。本篇文章将会使您一探究竟，让您对不同的 Reset 方案有所了解。
最常见和最全面的 CSS Reset 方案库
1. Normalize.css
Normalize.css 是目前最为流行的 Reset 方案之一。它不仅清除了浏览器的默认样式，也没有去掉有用的默认样式，因此具有较好的模块化特性。Normalize.css 包含一些基本的通用样式，例如表格，背景色，文本大小等方向的样式。Normalize.css 还支持 Less 和 Sass 预处理器。但它的文件比较大，需要慎重考虑。
示例代码：
-- -------------------- ---- -------
-- ------------- ------ - --- ------- - -------------------------------- --
-- --------
-------------------------------------------------------------------------- --
---
- -- ------- --- ---- ------ -- --- ---------
- -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ----
--
---- -
------------ ----- -- - --
------------------------- ----- -- - --
---------------------------- ------------
-
-- ----
-------------------------------------------------------------------------- --
---- -
------- --
------------ ---------- -------------- ------------------- ------ ----
------- ---------- ------ ------ -----------
---------- -----
------------ ----
------------ ----
------ --------
----------- -----
----------------- -----
-2. Reset.css
Reset.css 是另一种流行的 Reset 方案，它重置了所有元素的样式并全部设为 0，例如所有的外边距、内边距、字体大小等。Reset.css 完全禁用了浏览器的所有默认样式，适合想把自己所有样式全写入 CSS 中的开发者使用。但是 Reset.css 没有新增任何有用的 CSS 样式模块，所以你的样式表会相对较长，因此考虑文件大小也是很重要的。
示例代码：
-- -------------------- ---- ------- ----- ----- ---- --- --- --- --- --- --- --- --- --- --- --- -- ----------- ---- ----- --------- ------- ------- ------ --------- --- -- - ------- -- -------- -- - ----- - ---------------- --------- --------------- -- - --------- --- - ------- -- - -------- -------- ----- ----- ---- --- ------- --- --- - ------------ ------- ----------- ------- - --- -- - ----------- ----- - -------- -- - ----------- ----- - --- --- --- --- --- -- - ---------- ----- ------------ ------- -
3. Eric Meyer’s Reset.css
Eric Meyer’s Reset.css 是一种古已经有了的 Reset 方案。它通过撤销默认样式，使 HTML 元素的行为更加稳定，并且给了外观使用了默认设定的元素一个清零的值。Eric Meyer’s Reset.css 中生成的样式较大，对代码的使用要求比其他 Reset.css 更高。
示例代码：
-- -------------------- ---- ------- -- ----------------------------------------- ---- - -------- -------- ---- ------- ------- -- ----- ----- ---- --- --- --- --- --- --- --- --- --- --- --- --- ---- ----- --------- ------ --------- -- ----------- --- -- - ------- -- -------- -- -
结论
在选择什么 Reset 方案时，需要仔细考虑你的项目的实际情况。以下是我选择 CSS Reset 的建议：
- 首先，为了提高效率和准确性，我们应该优先考虑使用最为流行的 Normalize.css；
- 如果您需要完全控制自己的样式，并确信自己不需要浏览器的默认样式的话，那么使用 Reset.css 可能更为适合；
- 如果您想要使用经典的 Reset 方案，并且希望对默认浏览器样式做些修改，Eric Meyer’s Reset.css 会是不错的选择。
总之，合理并适宜的 Reset 方案选择对于 Web 前端开发者将会有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672475a52e7021665e1392b5