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

前言

在编写前端样式时，很多开发者都会遇到浏览器差异带来的排版问题。为了解决这个问题，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

阅读全文

猜你喜欢

  • 如何在 AngularJS 中实现框架化懒加载？

    随着前端框架的不断发展，对于单页应用的性能优化需求也越来越高。其中，懒加载技术是一种常用的优化方式。懒加载可以提升页面的访问速度，加快网站的用户体验。在 AngularJS 中，我们可以使用框架化的懒...

    1 年前
  • LESS mixin：如何在项目中轻松实现代码重用

    在前端开发中，我们经常会遇到需要重用某些代码块的情况。如果每次都复制黏贴一大坨代码，开发效率将会大大降低，维护难度也会增加。这时，LESS mixin 就能派上用场了。

    1 年前
  • 运用 Enzyme 进行 React 组件的 TDD 开发流程

    介绍 测试驱动开发（Test-driven development，缩写为 TDD）是一种开发方法，它要求在编写代码之前先编写测试用例。这种开发方式可以提升代码的质量和可维护性。

    1 年前
  • RxJS 从入门到精通

    RxJS 是一个基于事件流和数据流的响应式编程库。它能够让我们用一种类似于迭代器的方式来处理异步的数据流，可以帮助我们更好地管理复杂的前端逻辑。 在本文中，我们将深入了解 RxJS 中的数据流管道实现...

    1 年前
  • Jest 测试组件时的 Error: Uncaught TypeError: Cannot read property 'mock' of undefined 错误解决方法

    在使用 Jest 进行前端组件测试时，有些情况下我们可能会遇到如下错误： -------- ---------- ------ ---- -------- ------ -- ---------这个错...

    1 年前
  • 必须掌握的 Promise 错误处理技巧

    Promise 是前端开发中常用的解决异步编程问题的工具，它可以让程序更加优雅和可读。但是在使用 Promise 时，也可能会遇到错误和异常情况，如果处理不当，会导致程序崩溃或出现不可预知的问题。

    1 年前
  • 如何在 Flexbox 布局下实现换行对齐

    背景 在网页开发中，我们经常需要使用到 Flexbox 布局。Flexbox 是一种简单、灵活的 CSS 布局方案，能够更加高效地完成水平或垂直方向的排列。但是，当我们需要对 Flexbox 中的子元...

    1 年前
  • PWA 技术方案综述

    PWA（Progressive Web App）是一种新型的 Web 应用程序，它结合了 Web 和 Native 应用程序的优点，可以实现类似原生应用的离线访问、快速响应、安全性及可发现性等特点，是...

    1 年前
  • 如何使用 PM2 让 Node.js 应用在后台长时间运行？

    随着 Node.js 技术的发展，越来越多的企业和开发者开始使用 Node.js 构建应用程序。然而，长时间运行 Node.js 应用程序并不是一件容易的事情。这时候，PM2 就成为了一个非常好的解决...

    1 年前
  • Deno 中如何进行网络代理

    前言 Deno 是一个新型的 JavaScript 和 TypeScript 运行时环境，它的设计目标是为了更加安全、更加稳定。网络代理是很多应用场景必须的功能，比如在通过 Deno 进行爬虫时，可能...

    1 年前
  • 使用 Hapi 框架构建实时聊天应用程序

    随着现代社交媒体的兴起，人们对实时聊天应用程序的需求越来越高。在这个过程中，前端开发人员需要遵循各种标准和协议来实现这些应用程序。无论是用于即时通讯还是直播流，实时性都是最重要的问题。

    1 年前
  • 开放平台无障碍设计 - 思路与实现

    前言 在当今数字时代，开放平台已经成为了各类企业与用户交流的桥梁。然而，在设计的过程中，我们不能忽略部分用户因为生理或心理的原因对网站、App等平台存在的不可预期的使用障碍。

    1 年前
  • 使用 Custom Elements 时遇到 “Uncaught ReferenceError: HTMLElement is not defined” 该怎么办？

    随着 Web 技术的不断进步，Custom Elements 也被越来越多的前端开发人员所应用。它是一种可以自定义 HTML 元素的技术，并且具有良好的复用性，但有时候在使用 Custom Eleme...

    1 年前
  • ECMAScript 2021 (ES12) 中的 WeakRef，快速解决内存泄露问题

    随着前端技术的不断更新，前端开发遇到的问题也越来越复杂和多样化。其中，内存泄露是前端开发者经常面对的一个问题。尤其是对于开发一些大型应用程序的开发者来说，内存泄露更加严重。

    1 年前
  • 使用 Mocha 进行 Mock 数据的测试

    在前端开发中，使用 Mock 数据进行测试是一个不可忽视的环节。通过 Mock 数据测试，我们可以测试前端代码在不同数据场景下的表现，发现潜在的问题并进行排查。在本文中，我们将介绍如何使用 Mocha...

    1 年前
  • 利用 ECMAScript 2018 中的 Map 与 Set 数据结构进行高效处理

    在前端开发中，我们经常需要对数据进行处理，比如筛选、过滤、排序等等。为了更高效地处理数据，我们可以使用 ECMAScript 2018 中新增的 Map 和 Set 数据结构。

    1 年前
  • Tailwind 中 Flexbox 垂直居中的实现方法

    前言 在前端开发过程中，居中是一个经常遇到的问题。虽然可以通过表格、绝对定位等方式实现，但这些方法都有其局限性和复杂度，特别是在响应式设计中。因此，使用 Flexbox 进行居中处理是目前前端开发中更...

    1 年前
  • Next.js 开发的常用工具库及其使用

    前言 Next.js 是一个由 Vercel 开发的 React 应用程序框架，它提供了许多工具和服务，使得构建现代的 Web 应用程序变得更加容易和高效。因为 Next.js 具有出色的 SSR（...

    1 年前
  • Docker 容器内无法访问外部网络的解决方法

    背景 Docker 是一个广泛使用的容器化技术，可以让应用程序在不同的操作系统上运行。在 Docker 中，每个容器都是一种独立的运行环境，具有自己的网络设置和配置。

    1 年前
  • TypeScript 中如何正确处理异常

    前端开发中，处理异常是非常重要的一环。异常处理能够帮助我们更好地调试程序，提高代码的健壮性和可维护性。在 TypeScript 中，异常处理也是一个必须掌握的技能。

    1 年前

相关推荐

    暂无文章