模块化CSS文件

Question

许多人都说要将外部CSS和JavaScript文件的数量保持在最低限度，以减少往返时间。例如，Google建议每个网站分别最多使用两个CSS和JavaScript文件。

问题是，我已经将CSS代码分解成几个文件，这取决于它作为“模块化”一部分的性质。例如，我将仅在应用程序的某个部分中使用的CSS代码放在单独的文件中。因此，一些文件的代码不到一百行。

我是Java开发者，这实际上是Java推荐的做法，但CSS是一个完全不同的生物，我对CSS知之甚少。这是我的问题。

• 保留尽可能多的CSS文件以保证可读性和可维护性是否有意义？

• Web项目中可管理多少个CSS文件？

• 您过去曾使用的Web应用程序中的CSS文件平均数是多少？

Answer 1

最好的解决方案是编写一个结合（并缩小）多个CSS或JS文件的脚本。

Answer 2

您可能会受到像Bundler或Chirpy

这样的解决方案的好处

http://www.codethinked.com/bundler-now-supports-css-and-less

http://chirpy.codeplex.com/

我们使用chirpy是因为我们在Bundler中发现了一个错误，可以将查询字符串参数注入到css文件中。

作为文件整合的奖励，您还可以获得.less语法处理。

Answer 3

我同意其他人在这里所说的，是的，当你开发你有多个CSS文件时，但是对于生产你应该合并一个缩小它们。

但是我不同意你应该将它们全部合并为一个单独的文件。因为这意味着只想访问您的主页的人必须等待页面x，y，z上的CSS也要下载。

我通常做的是有2或3个CSS文件。

• 仅适用于主页的1个小CSS文件，因此加载速度非常快，因此临时访问者无需等待查看我的网站内容
• 可供访客用户使用的每个其他页面的另一个CSS文件
• 另一个CSS文件，仅适用于需要登录的网站的成员。

你也可以使用像HEAD.JS这样的脚本来异步管理你的CSS和javascript

从该网站http://headjs.com/

---

有一个常见的误解是单个组合脚本表现最佳。错误：

• 最新的浏览器和Head JS可以并行加载脚本。平行加载3个部分而不是单个块通常会更快。
• 如果更改了单个文件，则整个组合会发生变化，您将失去缓存的好处。最好只组合不经常更改的稳定文件。
• 许多受欢迎的图书馆都在CDN上托管。你应该利用它而不是自己主持
• iPhone 3.x无法缓存大于15kb的文件，而在iPhone 4中，限制为25kb。这是gzipping之前的大小。如果你关心iPhone，你应该尊重这些限制。

Answer 4

正如您所指出的，拥有多个CSS文件通常会带来更好的可维护性和模块化。

所需的CSS文件数量取决于项目的大小和项目中的模块化程度。

提供CSS文件而非许多文件通常会在页面加载时间上产生显着差异，因此理想的解决方案是使用某种工具来组合甚至压缩CSS文件。这可以通过Minify等工具在运行时轻松完成。

Answer 5

组合资源可能是有益的，因为它可以减少HTTP请求的数量;减少HTTP请求的数量肯定会降低开销并可以提高性能。它还可以带来缓存的好处，因为缓存中的对象可以更少。

也就是说，这种优化仅适用于指标。那里有个人资料工作者（Firebug有一个）可以显示你正在做多少请求以及他们需要多长时间。您可能（或可能不）发现有更多时间有效的方法来提高性能并减少服务器负载。