7

I recently stumbled across a project that has 27 different CSS files used by the same theme, and they are for specific sections in the application, rules split like this: there's a CSS file for the menubar, there's two more files for contact forms, another one does the footer, specific-page formatting, two more for galleries, so on.

So I asked lead what's the reasoning for so many CSS files and if it's safe to concatenate.

His reply was that all files sum 126KB, bandwidth matters and there's 500+ CSS rules, so best not concatenate to prevent selector collisions.

I know that 126KB of uncompressed CSS files is an awful lot, but I also know (from the best practices guide) that all these files should be downloaded single shot, so browsers will cache one biggie instead of downloading them one by one across the browsing session.

Why should I not keep myself from gluing all these files together? Is it a big deal?

4

3 回答 3

6

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

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

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

于 2012-09-06T21:08:15.327 回答
4

为什么我不应该阻止自己将所有这些文件粘在一起？有什么大不了的吗？

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

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

重点：您所面临的情况表明技术债务。

于 2012-09-06T21:13:09.757 回答
0

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

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

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

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

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

于 2012-09-06T22:20:00.287 回答