Normalize.css 应该作为单独的文件保存还是编译(通过 postcss @import)到最终的 "styles.css" 文件中?

Should Normalize.css be kept as separate file or compiled (through postcss @import) into the final "styles.css" file?

根据最终产品的 performance/speed 和最佳实践 - 应该 Normalize.css 保存为单独的文件(link 来自 HTML head)还是将它编译成最终的 .css 文件更好?

我在这里和许多其他网站上进行了搜索,但找不到答案。希望您能理解我的困境:

1.将 normalize.css 保留在节点模块文件夹中,并从我们的 html. 中保留 link 我对编码还很陌生,但是如果我对这种方法的理解正确的话,除了我们的 main.css 文件之外,我们还会向服务器添加一个(也许是不必要的?)请求? performance/loading 网站时间有多糟糕?

<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 行代码(和注释)。就可读性而言,这对我来说似乎不是最佳解决方案,但现在网站加载速度会更快一些吗?

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

提前谢谢你。

理想情况下,将 normalize.css 添加到最终的 css 将在 post 处理步骤中完成,该步骤将所有源文件合并到一个文件中并缩小整个文件。这样您的源代码仍然可读,但您最终只加载了一个文件。

您说的非常正确,如果网页在加载时对服务器的请求越少,加载速度就会越快。您也正确地指出组合文件的可读性低于单独加载的单个文件。

在你的情况下哪个对你更重要是一个只有你能回答的问题。这就是为什么您很难找到明确的建议。

我个人在开发中使用单独的文件选项,以便文件易于阅读和调试。加载速度在开发机器上并不重要。

在生产网站中,我使用组合文件选项。事实上,我使用 combine 和 minify 来减少加载的文件数量并使这些文件的大小尽可能小。在这种情况下,可读性不太重要。