为什么我们不使用一个CSS文件而不是许多CSS文件？

Question

我最近偶然发现了一个项目，该项目具有 27个不同的CSS文件，使用相同的主题，它们是针对应用程序中的特定部分，规则分为这样：那里有一个CSS文件对于菜单栏，还有两个用于联系表单的文件，另一个用于页脚，特定页面格式，另外两个用于库，等等。

所以我问了导致这么多CSS文件的原因是什么，以及它是否可以安全连接。

他的回答是所有文件总和为126KB，带宽很重要且有500多个CSS规则，因此最好不要连接以防止选择器冲突。

我知道126KB的未压缩CSS文件非常多，但我也知道（从最佳实践指南）所有这些文件应该单击下载，因此浏览器会缓存一个biggie而不是逐个下载它们整个浏览会话。

为什么我不能让自己不把所有这些文件粘在一起？这是一个大问题吗？

Answer 1

由于级联的工作原理，只要将文件连接在一起，就没有可能造成伤害的方法，前提是你按照它们在源中出现的顺序。这将确保后面的文件覆盖之前的文件仍然会这样做。

然后，您可以考虑缩小CSS。这不会改变选择器的功能，但会压缩它们以减少带宽。

总而言之，拥有27个CSS文件只是愚蠢的。用户必须等待建立27个连接，发出请求以及完成下载，才能看到该页面。现在，通过适当的缓存，这确实有所改善，但即便如此......

Answer 2

  

为什么我不能让自己不把所有这些文件粘在一起？这是一个大问题吗？

如果您知道CSS文件没有任何冲突的指令，并且它们应该按照应用程序中每个页面的相同顺序加载，那么 实际上应该将它们捆绑到一个缩小的CSS文件。

但就是这样。通常，当您发现自己处于这种情况时，很难辨别哪些CSS指令应用于哪个屏幕。

重点：您面临的情况表明technical debt。

Answer 3

虽然我同意27个CSS文件是完全疯狂的，理想情况下它应该合并和缩小，但有一些用例可以分割样式表。

考虑一下： 您正在处理一个子网站，该网站需要大量的CSS规则，而这些规则在网站上没有使用。如果不能保证用户将访问子站点和主站点（因此利用缓存），保留两个样式表是有意义的，因此浏览器不必通过一个巨大的样式表来阅读如果有什么东西与HTML文档匹配。

现在，这不是常见的情况，但它确实发生了。一个例子是一家大型公司，其中有很多子公司都有自己的网站。它们可能包含一个样式表，用于所有共享样式（特定于公司的UI等）以及用于布局和覆盖的单独样式表。

那就是说，我非常怀疑27种样式表是否有意义。原作者可能没有任何线索，并认为它更具结构性。模块化的CSS实际上非常简洁，但它应该在到达客户端之前始终合并和缩小。这是SASS中常见的工作方法。对于网站的特定部分或功能，您将拥有大量部分样式表，但只要您点击 Ctrl + S ，它就会自动合并到一个整洁的小包中。

现在，您可以通过访问每个页面并记下订单来了解网站上CSS文件的加载顺序。这将是乏味的工作，并不能保证它会真正得到回报，但它可以做到。