强烈推荐:10 个优秀的 CSS Reset 代码

阅读时长 14 分钟读完

强烈推荐:10 个优秀的 CSS Reset 代码

在前端开发中,CSS Reset 是非常重要的一部分,它可以让我们消除不同浏览器间默认样式的差异,为后续的开发工作提供了良好的基础。今天我们来推荐 10 个优秀的 CSS Reset 代码,帮助大家更好地进行 CSS 开发。

  1. Normalize.css

Normalize.css 是最受欢迎的 CSS Reset 库之一,它能够统一浏览器的默认样式,提供了跨浏览器的一致性。它保留了合理的默认值,同时修复了许多常见的浏览器问题。它具有强大的浏览器的兼容性,是很多前端开发者的首选。

  1. Eric Meyer Reset

Eric Meyer Reset 是一款非常古老的 CSS Reset 库,它是首批出现在互联网上的 CSS Reset 之一,具有良好的浏览器兼容性和广泛的用户基础。它能够使用较简单的方式消除浏览器的默认样式,为我们的开发工作提供了极大的帮助。

-- -------------------- ---- -------
----- ----- ---- -----
------- ------- -------
--- --- --- --- --- ---
-- ----------- ----
-- ----- -------- --------
---- ----- -----
---- ---- --- ---- ----
---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- --
-------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
  ------- --
  -------- --
  ------- --
  -------- --
  ---------- -----
  --------------- ---------
  ----------- ------------
-
展开代码
  1. Yahoo Reset

Yahoo Reset 是一款基于 Eric Meyer Reset 的样式重置库,具有良好的浏览器兼容性和稳定性。它能够重置大多数 HTML 元素的默认样式,为我们的开发工作提供了一致性的样式基础。

-- -------------------- ---- -------
---- -
  ------ -----
  ----------- ----- -- ----- --
-

---------------------------
----------------------
-----------------------------
------------------ -
  ------- --
  -------- --
-

----- -
  ---------------- ---------
  --------------- --
-

------------ -
  ------- --
-

--------------------------
----------------------------- -
  ----------- --------
  ------------ --------
-

------- -
  ---------------- -----
-

-- -
  ----------- -----
-

---------- -
  ----------- -----
-

----------------- -
  ---------- -----
  ------------ -------
-

---------------- -
  -------- ---
-

------------ - ----------
展开代码
  1. Meyerweb Reset

Meyerweb Reset 是 CSS 重置的又一款经典库,专注于去除默认样式的同时,保留了许多实用的 HTML 元素样式。它的设计思想是在尽可能少的样式代码的前提下,提供高度的可定制性和清晰的样式结构。

-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ----- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
  ------- --
  -------- --
  ------- --
  -------- --
  ---------- -----
  --------------- ---------
  ----------- ------------
-

---- -
  ------------ --
-
展开代码
  1. HTML5 Reset

HTML5 Reset 是一款面向 HTML5 元素样式的重置库,它不仅去除了默认样式和差异,还对 HTML5 元素的样式进行了优化和设置。它是一款轻量级的库,适合用于不同类型的项目和网站。

-- -------------------- ---- -------
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
  -------- ------
-

---- -
  ----------------- -----
  ------ -----
-

------ ------- ----- -
  -------- -------------
  --------- -------
  ------ --
-

--------------------- -
  -------- -----
-

-------- -
  -------- -----
-

---- -
  ---------- -----
  ------------------------- -----
  --------------------- -----
-

---- -
  ------- --
  ---------- ----
  ------------ ----
  ----------------- -----
  ------ -----
-
展开代码
  1. Blueprint

Blueprint 是一款宽度与栅格系统相结合的 CSS Reset,它能够方便快捷地布局和排版。它的核心在于使用 HTML5 元素进行搭建和布局,同时使用 CSS 去除默认样式和差异性。它是一个强大的库,适合搭建中小型网站和项目。

-- -------------------- ---- -------
-- ---- --------- -- --
-- --- --

-- --- --- ----- --
----- ----- ---- ----- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- -----
---- ---- --- ---- -- --- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
  ------- --
  -------- --
  ------- --
  -------- --
  ---------- -----
  --------------- ---------
  ----------- ------------
-

---- -
  ------------ --
-

--- -- -
  ----------- -----
-

----------- - -
  ------- -----
-

------------------ -----------------
--------- ------- -
  -------- ---
  -------- -----
-

------ -
  -------- --
-

--- -
  ---------------- -----
-

--- -
  ---------------- -------------
-
展开代码
  1. Kube

Kube 是一款设计风格简洁、体积小巧的 CSS Reset 库,它能够消除浏览器样式的不一致性,为后续的样式编写提供了统一的基础。它具有响应式的设计思想,适合用于各种设备和浏览器。

-- -------------------- ---- -------
-- --------------------------
   ------- -----
   -------------------------- --

---- -
  ---------- -----
  ------------ -----------
  ----------- -----------
-

---- -
  ------- --
-

--- -
  --------------- -------
  ------- --
  ---------- -----
-

------ ----- -
  ---------- -----
-

--- --- --- --- --- -- -
  ------- --
  ------------ -------
-

- -
  ------- - - ----
-

- -
  ---------------- -----
  ------ --------
-

-- --------------------------
   ------- ------
   -------------------------- --

---------- -
  ------- - -----
  -------- - -----
  ---------- -------
  ----------- -----------
-
展开代码
  1. Magnetic

Magnetic 是一款 CSS 库,具有清晰的可读性和稳定性,能够提供基础的元素风格和样式格式化。它在保留原始样式的基础之上,为元素提供了一致性的样式基础,适用于多种开发需求。

-- -------------------- ---- -------
-- --------------------------
   ------- -----
   -------------------------- --

----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- -
  ------- --
  -------- --
  ------- --
  -------- --
  ---------- -----
  --------------- ---------
  ----------- ------------
-

---- -
  ------------ --
-

----- -
  ---------------- ---------
  --------------- --
-

--- -- -
  -------- --
-

--- --- --- --- --- -- -
  ------------ -------
  ---------- -----
  ------------------
-

--- -- -
  ----------- -----
-

----------- - -
  ------- -----
-

------------------ ----------------- --------- ------- -
  -------- ---
  -------- -----
-

-- --------------------------
   ------- ------
   -------------------------- --

---- -
  ------------ ---------- ------ -----------
  ---------- -----
  ------ -----
  ----------- -----
-

------- ------------------- ----------------------- --------------------- ------- -------- -
  ---------- -----
  ------------ ------ ---------- -----------
  ------------------- ----- -- -- ------ ---- --
-
展开代码
  1. Gutters

Gutters 是一款基于 HTML5 的元素重置库,能够消除默认样式和消除差异。它的特点是设计美观、修饰简单,并能够快速应用到任何网站或应用中。

-- -------------------- ---- -------
-- --------------------------
   ------- -----
   -------------------------- --

---- -
  ---------- -----
  ------------ ------ ---------- -----------
-

----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- -
  ------- --
  -------- --
  ------- --
  -------- --
  ---------- -----
  --------------- ---------
  ----------- ------------
-

-- --------------------------
   ------- ------
   -------------------------- --

---------- -
  ------- - -----
  -------- - -----
  ---------- -------
  ----------- -----------
-

------------ ---------- -
  -------- ---
  -------- ------
  ------ -----
-

------- -
  ------ -----
  ------------ -----
  ------------- -----
  ----------- -----------
-
展开代码
  1. UNCSS

UNCSS 是一款能够自动消除没有使用的 CSS 的库,它能够帮助我们减小样式表的大小,同时提高应用的性能。它的使用十分简单,只需要将你的样式表和应用一起运行即可。

-- -------------------- ---- -------
-- --------------------------
   ------- ------
   -------------------------- --

---- -
  ---------- -----
  ------------ ------ ---------- -----------
-

--- --- --- --- --- -- -
  -------------- -----
-

- -
  -------------- -----
-

------- ------------------- ----------------------- --------------------- ------- -------- -
  ---------- -----
  ------------ ------ ---------- -----------
  ------------------- -----
-

-- --------------------------
   ------ ------
   -------------------------- --

-- ---- --
-------- -
  -------------- ----
-

-- --- --
---------- -
  -------------- --- ----- -----
-

-- ---- --
------------ -
  ------------ --- ----- -----
-

-- ---- --
------------- -
  ------------- --- ----- -----
-

-- --- --
----------- -
  ----------- -----
-

-- --- --
-------------- -
  -------------- -----
-
展开代码

以上是我们为大家推荐的 10 个优秀的 CSS Reset 代码,它们拥有不同的特色和优势,可以根据自己的需求进行选择和使用。在使用时,请注意库的稳定性和兼容性,同时尽量减小代码的体积,提高应用的性能。希望这篇文章能够为你带来帮助,谢谢阅读。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67c05fd1314edc26846c478a

纠错
反馈

纠错反馈