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

【问题标题】：Why are we not using one CSS file instead of many CSS files?为什么我们不使用一个 CSS 文件而不是多个 CSS 文件？
【发布时间】：2012-08-31 18:19:47
【问题描述】：

我最近偶然发现了一个项目，该项目有 27 个不同的 CSS 文件用于同一主题，它们用于应用程序中的特定部分，规则拆分如下：菜单栏有一个 CSS 文件，还有两个用于联系表单的文件，另一个用于页脚、特定页面格式，还有两个用于画廊，等等。

所以我问lead这么多CSS文件的原因是什么，连接是否安全。

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

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

为什么我不应该避免将所有这些文件粘在一起？有什么大不了的吗？

【问题讨论】：

拥有多个 CSS 文件，或者至少是多个部分，可以让事情保持整洁且易于维护。另一方面，正如在下面的回答中已经说明的那样，拥有 27 个 CSS 文件是愚蠢的。我也不明白任何布局怎么可能需要 500 多个规则。

标签： css organization project-organization

【解决方案1】：

由于级联的工作方式，如果您按照它们在源中出现的顺序保持它们，则仅将文件连接在一起是不可能造成伤害的。这将确保以后的文件覆盖较早的文件仍然会这样做。

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

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

【讨论】：

+1 只针对这一行："拥有 27 个 CSS 文件简直是愚蠢的"
看起来有办法（确实如此）。这家伙实际上是根据以前的覆盖来实现覆盖的，这些覆盖是由不同的包含顺序引起的。现在猜测这些的唯一方法是知道那个人写这些部分的顺序。我不知道如何在不破坏一切的情况下做到这一点。如果 27 个 css 文件是愚蠢的，那么这家伙一定是疯了
我在问题中看不到任何暗示所有 27 个文件都包含在每个页面中的内容。可能存在一组通用样式和一组特定于页面（或站点子部分）的 CSS 文件，因此在任何单个页面上只加载了两个或三个。

【解决方案2】：

为什么我不应该避免将所有这些文件粘在一起？有什么大不了的吗？

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

但仅此而已。通常，当您发现自己处于这种情况时，很难辨别哪些 CSS 指令应用于哪些屏幕。

强调：你所面临的情况表明technical debt。

【讨论】：

@GRIGORE-TURBODISEL，“技术债务”文章很好，但它并没有真正回答你的问题……它只是解释了你可能会陷入这种困境的可能原因。我看不出它如何帮助任何人弄清楚事后如何继续前进。
我不认为拥有大量 css 文件意味着您有技术债务。如果文件被正确组织和注释，并且已经注意确保没有交叉文件污染，那么它可能非常有用。例如，通过将不同的表单 css 分成不同的文件，可能更容易维护。

【解决方案3】：

虽然我同意 27 个 CSS 文件完全疯狂，理想情况下应该合并和缩小，但在某些用例中划分样式表是有意义的。

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

现在，这种情况并不常见，但确实会发生。一个例子是一家大型公司，拥有许多拥有自己网站的细分市场。它们可能为所有共享样式（企业特定 UI 等）包含一个样式表，并为布局和覆盖包含单独的样式表。

也就是说，我非常怀疑 27 个样式表是否有意义。原作者可能没有头绪，认为这样更有条理。模块化的 CSS 实际上非常简洁，但在到达客户端之前应该始终将其合并和缩小。这是SASS中常用的工作方式。对于网站的特定部分或功能，您将拥有许多部分样式表，但只要您按下 Ctrl+S，它就会自动合并到一个整洁的小包中。

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

【讨论】：