问题标签 [normalize-css]

就最终产品的性能/速度而言，并根据最佳实践 - Normalize.css 应该作为单独的文件保存（从 HTML 头链接）还是将其编译到最终的 .css 文件中更好？

我在这里和许多其他网站上搜索，但找不到答案。希望你能理解我的困境：

1. 将 normalize.css 留在 node-modules 文件夹中，并从我们的 html 链接到它。 我对编码还很陌生，但是如果我对这种方法的理解正确，除了我们的 main.css 文件之外，我们还会向服务器添加一个（可能是不必要的）请求吗？它对网站的性能/加载时间有多糟糕或有多大的负担？

<link rel="stylesheet" href="../node_modules/normalize.css/normalize.css"> <link rel="stylesheet" href="temp/styles/styles.css">

另一方面，我们可以：

2. 使用 'postcss-import' 将 normalize.css 与其他模块一起导入，并将它们一起编译成一个最终的 .css 文件。

好的，现在我们把所有东西都放在了一个地方，但是我们刚刚在我们实际的 css 的第一行之前添加了 451 行代码（和注释）。就可读性而言，它对我来说似乎不是最好的解决方案，但现在网站加载速度会更快吗？

免责声明：到目前为止，我一直在使用第二种方法，但我开始问自己这是否是最佳解决方案。

先感谢您。

我知道 bootstrap 3.3.7 已经包含 normalize.css 3.0.3 但是已经有 8.0.0 版本。我应该在链接到引导程序 3.3.7 之前添加到 normalize.css 8.0.0 的链接吗？

刚刚将包添加normalize-scss到我的新 Vue 项目中，但没有应用任何样式......我都尝试了：

@import 'normalize-scss'在我的styles.scss

import 'normalize-scss'在我的main.js页面

难道我做错了什么？该包显然在那里，因为应用程序运行，但它实际上并没有应用任何 css 规则。

我有一个 webpack 项目设置，如下所示：

webpack.config.js：

我已经通过安装 normalize.css npm install normalize.css，但我无法引用它。

当我放在文件@import "~normalize.css";顶部时main.scss，出现以下错误：

amp-story 能否与 Normalize.css 和 Basscss 完全兼容？我问是因为 AMP Start 是建立在这两个现有的开源项目之上的：

https://www.ampstart.com/howitworks

规范化.css

Normalize.css 使浏览器更一致地呈现所有元素并符合现代标准。它仅针对需要规范化的样式。这为跨设备的 AMP Start 定义清晰一致的样式提供了一个全新的条件。

低音炮

AMP start 是使用低级 CSS 工具包 Basscss 构建的。Basscss 是一个非常轻量级的工具包，它提供了许多 CSS 实用程序类来帮助我们完成布局、响应式网格等操作，而无需编写任何自定义 css。

Basscss 开箱即用，精益求精，反应灵敏，这对 AMP Start 很重要。我们使用 Basscss 作为基础（无插件），但我们从 CSS 规则中删除了任何“！important”实例，因为“！important”与 AMP 不兼容。通过使用现有的 Basscss 类，我们能够编写更少的 CSS，并且仍然可以制作漂亮的页面，即使有 AMP 的 50Kb CSS 限制。

在这两个项目提供的基础之上，我们在 CSS 中添加了一组更自以为是的样式，以便组件和模板继承 AMP Start 的一致外观。

总而言之，CSS 占 AMP 中 50kB 配额的一半不到，因此您应该有足够的空间使用 Basscss 和 AMP Start 类自定义您的页面。

我使用命令搭建了一个新的Nuxt.js项目，并将Bulma用于 UI 框架。我了解到 bulma.css 文件已包含在nuxt.config.js文件中，配置如下。npx create-nuxt-app

但后来我想使用normalize.css来确保样式在所有浏览器中保持一致。为了使它正常工作，这个 normalize.css 文件应该包含在所有 css 文件的顶部。

我已经尝试将它导入到这样的layout/default.vue文件中。（我参考了这个）

但是当我检查 Chrome devtools 时，我了解到 normalize.css 文件实际上包含在底部。

在 normalize.css 之前包含的样式是bulma.css

所以问题是：如何在这个 Nuxt.js 项目中正确导入normalize.css以便将其导入/包含在 css 文件列表的顶部？

与 1.15 的 a 一起使用时，Chrome 会截断 Segoe UI 的显示line-height（默认设置normalize.css）在 Firefox 上不会发生此行为

最好通过屏幕截图来说明这一点（放大而不是使用更大的字体）

你可以在这里看到一个 JSFiddle

为什么 Chrome 会截断 g 字符？为什么当你降低线高然后向同一个方向移动变得更好时，问题会变得更糟？

请注意，添加padding到输入并不能解决问题

每当使用现代单页应用程序 (SPA) JavaScript 框架（例如 Angular/React/Vue.js）时，是否仍然需要包含 Normalize.css 和/或重置 CSS？

默认情况下，框架是否删除了所有内置浏览器样式（重置 CSS）并使内置浏览器样式在浏览器之间保持一致（Normalize.css）？

我创建了一个 SCSS 文件。然后复制粘贴 Normalize.css 的所有 CSS 样式。然后我将该文件导入到 style.SCSS 中。之后，我的网页在右侧显示一个水平滚动条和空白区域。我找不到代码的哪一部分对此负责。我给你我导入的所有 Normalize.css 代码。要点链接