常用 CSS Reset 和 Normalize.css 对比,你该如何选择?

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

前言

在编写前端样式时,很多开发者都会遇到浏览器差异带来的排版问题。为了解决这个问题,CSS Reset 和 Normalize.css 等工具应运而生。 CSS Reset 是一种重置 CSS 样式的技术,能够将网页元素的默认样式清空,实现跨浏览器的样式一致性。而 Normalize.css则是一种 CSS 样式工具,更注重统一不同浏览器之间的默认样式,使得不同浏览器中的 HTML 元素更有序、更一致。

两种技术各有优缺点,那么我们该如何选择呢?本文将会从多个角度进行详细比较和指导。

常用的CSS Reset和Normalize.css

1. CSS Reset

CSS Reset 意为重设 CSS,去掉浏览器默认样式,可让你的 Web 站点以自己期望的样式呈现。它卸载浏览器默认样式后,会给一些 HTML 元素设置默认的样式。

以下是常用的 CSS Reset 的代码:

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

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

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

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

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

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

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

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

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

代码来自于 Eric Meyers Reset CSS

2. Normalize.css

Normalize.css 不是重置 CSS 排版样式,而是解决了前缀、一些 bug、一些不一样的默认属性和值以及一些样式的差异。Normalize.css 使浏览器标准化不同的默认值。

以下是 Normalize.css 的代码:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

选择方式和注意事项

  • 推荐使用 Normalize.css,因为 Normalize.css 相对于 CSS Reset,它更灵活,可以在保留默认效果的同时进行一定程度上的样式通用化。同时,Normalize.css 也是更加健全的解决方案,能够很好的兼容各个浏览器。
  • 当仅仅是想去掉一些不必要的默认效果时建议使用 CSS Reset。
  • 建议阅读并了解这些 CSS Reset 或 Normalize.css 的代码,特别是一些不同的解决方案。
  • 基础的 Reset 大多被包含在 Normalize.css 中,一般不需要再引入 CSS Reset。

总结

CSS Reset 与 Normalize.css 旨在解决的问题虽然类似,但实现的方式以及设计理念却完全不同。根据具体情况,开发者可以选择合适的工具,从而加速自己的前端样式开发。需要注意的是,在选择前尽可能地了解工具的使用方式、功能、以及与其需要搭配的技术,以落实最优选择。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64e630c9f6b2d6eab319bcea


猜你喜欢

  • Webpack 中怎么设置 sourceMap?

    在前端开发中,我们经常会使用 Webpack 来打包我们的代码。在打包后的代码中,同样也需要调试。但是由于代码经过了 Webpack 的处理,导致我们无法准确的定位错误。

    1 年前
  • ECMAScript 2019 中的 flat() 和 flatMap() 方法

    在现代的前端开发中,我们可能会使用多维嵌套数组来完成一些复杂的操作。然而,在处理这样的数组时,往往需要写出冗长的循环语句,并且这样的处理方式也容易出错。为了更高效、更方便地处理多维数组,ECMAScr...

    1 年前
  • Redis 使用过程中的 No space left on device 解决方案

    背景 Redis 是一款内存数据库,常常用于缓存和数据存储。在使用 Redis 的过程中,有时候会遇到 No space left on device 的错误提示,这个错误提示通常是指磁盘空间不足导致...

    1 年前
  • ESLint:如何解决在代码中使用 eval 的问题?

    Eval 函数是 JavaScript 中一个方便却也容易引发安全问题的函数。如果不加限制地使用,eval 可以直接执行传入的字符串作为代码,这可能导致恶意代码的注入和执行,从而造成严重的安全问题。

    1 年前
  • 解决 Kubernetes Pod 运行状态为 CrashLoopBackOff 的问题

    前言 Kubernetes 是目前最流行的容器编排平台之一,可以方便地进行容器化应用的部署、扩展和管理。然而,当您在 Kubernetes 中部署应用时,可能会遇到一些常见的问题,其中一种是 Pod ...

    1 年前
  • Cypress 测试框架中如何使用 fixture 解决动态数据问题

    在前端自动化测试中,数据准备是非常重要的一项工作。特别是在测试用例中需要使用到动态数据时,如何进行数据的准备和维护是一件麻烦的事情。Cypress 测试框架提供了一个 fixture 功能,可以很好地...

    1 年前
  • 解决 Angular Material 中 Dialog 组件滚动条不显示的问题

    在使用 Angular Material 中 Dialog 组件的过程中,很多开发者可能会遇到这样一个问题:滚动条不显示。虽然这个问题看起来很小,但实际上它会对用户的体验造成一定的影响,因此我们需要解...

    1 年前
  • JavaScript 中的面向对象编程详解

    面向对象编程(Object-Oriented Programming,简称 OOP)是一种编程范式,它将数据和方法封装在一起,以类(class)和对象(object)为基础,通过对类的定义和对象的实例...

    1 年前
  • Jest 测试 JavaScript 异步代码的方法及其注意事项

    在现代前端开发中,测试已经成为不可或缺的一部分。在 JavaScript 开发中,特别是在涉及到异步代码的情况下,测试变得更加复杂。Jest 是一个流行的 JavaScript 测试框架,它提供了许多...

    1 年前
  • 如何使用 GraphQL 和 Apollo Server 构建实时应用程序

    GraphQL 是一个由 Facebook 开发的查询语言,它可以有效地帮助我们查询和修改数据,并且可以根据需要进行数据的深层嵌套和局部更新。而 Apollo Server 是一种开源的、基于 Gra...

    1 年前
  • ECMAScript 2020 的新循环机制:for await...of

    ECMAScript 2020 的新循环机制:for await...of 在 JavaScript 中,循环是我们日常开发中最常用的语句之一,循环机制可以帮助我们遍历数组、对象、字符串等各种类型的数...

    1 年前
  • 利用 async/await、Promise.all 实现异步请求

    前言 前端开发中,异步请求几乎是无法避免的。在处理异步请求时,我们经常需要对多个异步请求的结果进行处理,此时就需要使用类似 Promise.all 这样的方法来实现。

    1 年前
  • SASS 优化 CSS 的几个策略

    在前端开发中,CSS 是不可或缺的一部分,而 SASS 是一种预处理器,它可以为 CSS 提供更好的结构和样式表现能力。本文将介绍 SASS 优化 CSS 的几个策略。

    1 年前
  • PWA 实践之优化图片加载

    近年来,PWA(Progressive Web App)已经成为前端开发的热门技术之一。尤其是在移动端,PWA 的优势更为突出,可以极大的提高用户的访问体验。然而,随着 PWA 技术逐渐普及,其中涉及...

    1 年前
  • 使用 Mocha 进行 Hapi 框架 API 接口测试

    在前端开发中,我们经常需要编写代码来测试我们的 API 接口,特别是在使用 Hapi 框架时。而使用 Mocha 可以大大简化这一过程,提高代码质量和稳定性。 Mocha 是一个流行的 JavaScr...

    1 年前
  • Laravel 框架中 RESTful API 常见的问题及解决方案

    RESTful API 是一种基于 REST 架构风格的 Web API,它使用 HTTP 协议的 GET、POST、PUT、DELETE 等请求方法来对 Web 资源进行操作。

    1 年前
  • 解决 Express.js 中的跨站点脚本攻击 (Cross-Site Scripting,XSS) 问题

    跨站点脚本攻击(XSS)是一种常见的网络安全漏洞,攻击者通过在受害者的浏览器中注入恶意脚本来获取敏感信息或者进行其他恶意行为。在 Express.js 中,通过一些安全措施可以有效地避免和解决 XSS...

    1 年前
  • 解决 ECMAScript 2018 中数组方法的错误使用问题

    ECMAScript 2018(也叫 ES9)是 JavaScript 的最新版本,它包含了一些新的数组方法,如 includes()、flat()、flatMap() 等。

    1 年前
  • 如何设计响应式弹出菜单,并使用公司 logo

    在合适的时间和位置使用弹出菜单可以使用户更方便地使用网页应用,也可以增加网站的美观度。响应式弹出菜单可以让你的网站适应不同的设备和屏幕大小,但是如何设计出一款既美观又易用的响应式弹出菜单呢?下面将详细...

    1 年前
  • LESS base64 函数:利用函数优化网站速度

    在前端开发中,优化网站速度是非常重要的。一个网站的速度往往会对用户体验产生很大的影响,并且对搜索引擎排名也有不可忽视的影响。而 CSS 中的 base64 函数就是可以帮助我们在一定程度上优化网站速度...

    1 年前

相关推荐

    暂无文章