单个巨大的.css文件与多个较小的特定.css文件？

Question

拥有一个包含将在几乎所有页面上使用的样式元素的单个Monster .css文件有什么好处？我在想，为了便于管理，我想将不同类型的CSS提取到几个文件中，并在我的主文件中包含每个文件，<link />这样不好吗？我觉得这样比较好positions.cssbutton.csstable.csscopy.css与site.css您有没有看到一种相对于另一种方法的陷阱？

Answer 1

这是一个很难回答的问题。我认为这两种选择都有其优缺点。

我个人不喜欢阅读单个巨大的CSS文件，并且维护它非常困难。另一方面，将其拆分会导致额外的http请求，这可能会减慢速度。

我认为这是两件事之一。

1）如果您知道自己的CSS永远不会改变，那么我会在开发阶段构建多个CSS文件（出于可读性考虑），然后在上线之前手动组合它们（以减少http请求）

2）如果您知道不时要更改CSS，并且需要保持可读性，那么我将构建单独的文件并使用代码（假设您使用某种编程语言）在以下位置将它们组合在一起运行时构建时间（运行时最小化/组合是资源消耗）。

无论使用哪种选择，我都强烈建议在客户端进行缓存，以进一步减少http请求。

编辑：

我发现这个博客展示了如何在运行时仅使用代码就结合CSS。值得一看（尽管我自己还没有测试过）。

编辑2：

在设计时，我已经决定使用单独的文件，并且在构建过程中尽量减少和组合。这样，我可以在开发时拥有单独的（可管理的）css，并在运行时拥有适当的整体式缩小文件。而且我仍然拥有我的静态文件和更少的系统开销，因为我没有在运行时进行压缩/压缩。

注意：对于那些在那里购物的人，我强烈建议在您的构建过程中使用捆绑程序。无论是从IDE内部构建，还是从构建脚本中构建，捆绑器都可以通过随附的Windows在Windows上执行，exe也可以在已经运行node.js的任何计算机上运行。

Answer 2

只包含一个CSS文件对于页面的加载时间会更好，因为这意味着更少的HTTP请求。

拥有几个CSS文件意味着开发更容易（至少，我认为是这样：每个应用程序模块一个CSS文件使事情变得更容易）。

因此，在两种情况下都有充分的理由...

一个可以让您充分利用这两个想法的解决方案是：

• 使用几个小的CSS文件进行开发

• 即更容易开发

• 要为您的应用程序创建一个构建过程，该过程将这些文件“组合”为一个

• 该构建过程还可以缩小该大文件，顺便说一句

• 显然，这意味着您的应用程序必须具有一些配置内容，才能从“多文件模式”切换到“单文件模式”。

• 在生产中仅使用大文件

• 即更快地加载页面

还有一些软件可以在运行时（而不是在构建时）组合CSS文件。但是在运行时执行此操作意味着要多吃一些CPU （并且显然需要一些缓存机制，以免过于频繁地重新生成大文件）