最全面的 CSS Reset 解决方案库一览

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