如何选择最佳 CSS Reset？

在编写前端页面时，一个常见的问题就是如何消除不同浏览器对 HTML 元素的默认样式。这时候我们就需要使用 CSS Reset，但是如何选择一个最佳的 CSS Reset ？这里提供一些指导意义，帮助你选择最适合你项目的 CSS Reset。

什么是 CSS Reset？

CSS Reset 是一种 CSS 文件或代码片段，它通过重置或覆盖浏览器的默认样式，确保所有元素在不同浏览器下呈现一致的样式。 一般来说，CSS Reset 建议在你的 CSS 文件之前引入，以确保对默认样式的重置优先于其他样式的应用。

常见的 CSS Reset

Eric Meyer's Reset CSS

Eric Meyer 的 Reset CSS 被认为是最古老、最常用的 CSS Reset 之一，它覆盖了 HTML5 元素的样式，并通过设置所有元素的 margin 和 padding 为零，确保它们在不同浏览器下呈现一致的样式。

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

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

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

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

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

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

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

Normalize.css

Normalize.css 是一款专业且易于使用的 CSS Reset 库，与 Eric Meyer 的 Reset CSS 不同，Normalize.css 尝试保持浏览器默认样式的正确性，只进行必要的样式重置，并通过设置通用的基础样式来保持一致性。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Modern CSS Reset

Modern CSS Reset 被认为是一种轻量的 CSS Reset，它尝试通过设置通用的基础样式来保持一致性，并修复了一些常见问题（例如， border-box 在所有元素上的异常值， underline 样式的处理方式等）。

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

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

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

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

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

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

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

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

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

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

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

在选择一个最佳的 CSS Reset 时，我们需要考虑一些因素。这里提供一些参考意见：

  • 建议选择轻量的 CSS Reset，因为它们不仅通常更快，而且更不容易干扰自定义样式。
  • 标准的 Reset 是一种优秀的选择，因为它们已经被广泛测试和使用，已验证其可靠性和可用性。
  • 你可以选择一个你更熟悉或是提供了一些特定功能的 CSS Reset。
  • 如果你的项目更加依赖基础样式，则 Normalize.css 可能更适合你。
  • 如果你的项目更注重自定义样式，则建议选择 Modern CSS Reset。

总结

CSS Reset 是一个消除浏览器默认样式差异的重要工具。 不同的 CSS Reset 有不同的使用场景和特点，我们需要选择适合项目的 CSS Reset。 一般来说，选择一个标准的和轻量的 CSS Reset 往往是最好的选择。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64520a36675af4061b5babf1

阅读全文

猜你喜欢

  • Socket.io 如何进行服务器集群管理

    Socket.io 是一个用于实现实时双向通信的 JavaScript 库，被广泛应用于前端开发领域。在处理大量数据、高并发请求和用户量较大的应用场景中，Socket.io 的服务器也需要进行集群化管...

    1 年前
  • SSE 安全性问题及解决方法

    什么是 SSE Server-Sent Events (SSE) 即服务器推送事件，是一种基于 HTTP 的服务器推送技术。它允许服务器实时地向客户端发送数据，而不需要通过客户端发送请求。

    1 年前
  • 从架构到实战：Serverless 架构实践

    前言 Serverless 架构相较于传统的服务端架构出现较晚，但其具有强大的灵活性、高效性和弹性能够更好的满足不断变化的业务需求。本文主要介绍 Serverless 架构的基本概念以及如何快速上手实...

    1 年前
  • 如何编写可读性更强的 Promise 代码？

    Promise 是 JavaScript 中一个非常重要的概念，它可以解决异步编程中的一些问题，比如回调函数嵌套、数据传递等等。然而，由于其语法特殊，Promise 代码有时候会让人感到晦涩难懂。

    1 年前
  • Apollo Server 解析 URL 参数

    随着 Web 技术的不断发展，前端应用越来越复杂。前端开发者需要用到不同的工具和框架来搭建应用，并且需要处理大量的数据。其中，客户端与服务器之间传递参数是不可避免的。

    1 年前
  • # Redux 中的 action、reducer、store 详解

    Redux 中的 action、reducer、store 详解 Redux 是一个用于 JavaScript 应用的可预测状态容器。它有三个重要的概念：action、reducer、store。

    1 年前
  • SASS 中的注释使用技巧

    在前端开发中，CSS 的编写不仅需要满足功能需求，还需要满足可维护性和可扩展性的要求。这时候就需要用到 CSS 预处理器，例如 SASS。在 SASS 中，注释是一个非常重要的工具，可以为一个项目的开...

    1 年前
  • 在 LESS 中使用 calc 函数时遇到语法错误怎么办？

    在 LESS 中使用 calc 函数时遇到语法错误怎么办？ 在前端开发中，CSS 是不可或缺的一部分，而 LESS 又是一种优秀的 CSS 拓展语言。在 LESS 中，我们可以使用 calc() 函数...

    1 年前
  • 全面了解 Enzyme 的 Shallow Rendering

    在前端开发中，测试是不可或缺的一部分。然而，测试不仅仅是验证代码是否能够按预期工作，同时也是检查它是否符合最佳实践。为了提升前端测试的效率和准确度，React 社区推出了一个非常强大的工具 Enzym...

    1 年前
  • ES9 中的静态成员（Static Members）

    在 ES9 中，有一个很重要的特性是静态成员（Static Members），它是面向对象程序设计中的一个关键概念。虽然它在 JavaScript 中早已存在，但 ES9 为静态成员带来了更方便的语法...

    1 年前
  • # Next.js 中如何使用动态路由实现参数路由

    Next.js 中如何使用动态路由实现参数路由 随着 Web 开发的飞速发展，前端技术不断丰富和深入，Next.js 是 React 生态系统中的一个框架，它为 React 应用程序提供了很多好处，其...

    1 年前
  • Sequelize 如何使用 Op.gt？

    在前端开发中，使用 Sequelize 是很常见的任务，它是一个用于 Node.js 的 ORM 框架，可以让我们以对象的方式操作数据库。在 Sequelize 中，我们常常需要使用 Op 对象来定义...

    1 年前
  • PWA 应用如何实现离线访问页面

    PWA（Progressive Web App）是基于 Web 技术构建的一种应用，它的核心特性是离线访问和本地缓存。在网络不稳定或者没有网络的情况下，也可以使用 PWA 应用来访问页面。

    1 年前
  • 利用 CSS Grid 实现复杂布局的逐步解析

    在前端开发中，布局是一个非常重要的部分。在传统的网页设计中，我们通常采用浮动、定位等方式进行布局，但随着网站设计的复杂度不断提高，这些方式已不能满足我们的需求。而 CSS Grid 是在 CSS3 中...

    1 年前
  • 使用 Kubernetes 的 Healthcheck 进行服务健康监测

    在现代化的应用开发中，容器化技术已经成为了不可或缺的一部分。Kubernetes，作为目前最为成熟和流行的容器编排系统，其自带的 Healthcheck 功能可以用于对容器内的服务进行健康监测。

    1 年前
  • Headless CMS 的自动化测试方法及工具

    随着 Headless CMS 技术的愈加成熟，越来越多的网站开发者选择使用 Headless CMS 来搭建网站。与此同时，自动化测试成为了保证 Headless CMS 网站质量和稳定性的必要手段...

    1 年前
  • 使用 Koa 实现 Vue 服务端渲染

    在现代的 Web 开发中，服务端渲染（SSR）已经成为一个不可或缺的技术。SSR 能够提高网站的性能和用户体验，同时也大大提高了 SEO。 本文将介绍如何使用 Koa 框架来实现 Vue 的服务端渲染...

    1 年前
  • 如何优化 Hapi.js 应用程序的性能

    Hapi.js 是 Node.js 的一个 web 框架，它提供了丰富的 API 和强大的路由功能，可以帮助我们构建高效、稳定的应用程序。然而，在实际开发中，我们可能会遇到性能问题，影响应用程序的效率...

    1 年前
  • Custom Elements 中的模板引擎

    Web Components 的 Custom Elements 让我们可以自定义 HTML 标签，以达到可重用和可维护的目的。模板引擎则是前端开发常用的工具，用于快速生成 HTML 页面和组件。

    1 年前
  • 如何使用 Fastify 和 TypeScript 构建一个强类型 Web 应用

    Fastify 是一个快速而且低开销的Web框架，可以用于构建服务器端API应用程序。而TypeScript是一种为大型应用程序所设计的开源编程语言，可以极大地提高代码可读性与可维护性，并减少代码的错...

    1 年前

相关推荐

    暂无文章