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

Question

拥有一个包含将在几乎所有页面上使用的样式元素的单个Monster .css文件有什么好处？

我在想，为了便于管理，我想将不同类型的CSS提取到几个文件中，并在我的主文件中包含每个文件，<link />这样不好吗？

我觉得这样比较好

1. positions.css

2. button.css

3. table.css

4. copy.css

与

1. 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 （并且显然需要一些缓存机制，以免过于频繁地重新生成大文件）