reset.css vs normalize.css

为了统一 css 样式，现在主流的做法是什么？以前是 reset.css

现在主流的做法是使用 normalize.css，它可以在不丢失原有样式的前提下，对不同浏览器的样式差异进行一些重置和规范化。与 reset.css 不同，normalize.css 的主要目标不是强制覆盖所有的样式，而是提供一组基准样式，让不同浏览器的默认样式更加一致，以减少开发中遇到的样式问题。normalize.css 还会修复一些浏览器的 bug，例如 Internet Explorer 的某些 box-sizing 错误。

需要注意的是，normalize.css 并不能完全解决浏览器兼容性问题，还需要根据具体情况对某些特殊样式进行调整。同时，为了避免样式冲突，还需要遵循一定的 CSS 命名规范和样式隔离机制，例如使用 BEM 命名法和 CSS Modules。

总的来说，normalize.css 是一种比较好的选择，它可以帮助我们在多个浏览器上保持一致的样式，并减少一些不必要的样式问题。

我要在使用 vite 脚手架 vue3 项目中引入 normalize.css 怎么做

在使用 Vite 脚手架创建的 Vue 3 项目中引入 normalize.css，可以按照以下步骤进行：

安装 normalize.css 可以使用 npm 或 yarn 安装 normalize.css，执行以下命令：

npm install normalize.css

在 main.js 中引入 normalize.css 在 main.js 中引入 normalize.css，以便在全局范围内应用：

import {createApp} from 'vue';
import App from './App.vue';
import 'normalize.css/normalize.css'; // 引入 normalize.css

createApp(App).mount('#app');

在 HTML 文件中引入字体 normalize.css 中使用了一些系统字体，需要在 HTML 文件中引入，否则可能会导致字体显示异常。可以在 public/index.html 文件中添加以下代码：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" />