<分区>
我阅读了关于这个问题的不同信息，我总是看到人们从性能的 Angular 建议使用一个大的 css 文件。但我不明白，加载所有页面的 css 文件然后在请求时为每个页面加载每个文件是否需要更多时间？ (我所看到的例子:Multiple css files or one big css file? 和 Single huge .css file vs. multiple smaller specific .css files? )。是的，也许会有多个http请求，但它们会在不同的时间段发生，所以基本上在需要时加载每个页面，然后在开始时浪费时间为每个页面加载css不是更好吗然后即时显示它们？
最佳答案
两种方法各有利弊。
拥有多个 CSS 文件将允许您在开发过程中正确地组织和分组您的 CSS 文件。但是，这也意味着要发出多个 HTTP 请求。 HTTP 请求在加载时间方面更昂贵，因为它必须联系服务器并获取文件。
此外，一旦文件被加载，它就会被浏览器缓存。这意味着，尽管最初加载 huge.css 的速度可能较慢，但在您浏览网站时不需要再次加载它。
根据我的经验和大多数开发人员的适应，您可以执行类似下面的操作来获得两个世界的大部分。
使用 css 预处理器 像SASS或 LESS .不要问我哪个更好，网络上已经有足够多的争论topic .只需选择一个你觉得舒服的。我的偏好是 SASS。
CSS 预处理器允许您将 CSS 文件分成更小、更有条理的文件。例如，您可以有一个 main.sass，其中包括 menu.sass、footer.sass 等
main.sass
include _menu
include _footer
include _header
...
_ 告诉 sass 不要为这些 sass 文件中的每一个编译单独的文件。所以它们都只会被编译成一个main.css。这些预处理器具有将给定的 sass 文件编译成浏览器可以读取的 css 文件的功能。您还可以使用 [livereload][4] 等工具实时编译它们。
您的开发代码中将包含这些 sass 文件。但是在您的生产代码中，您可以简单地使用编译后的单个 css 文件。
如果您感觉更有优势并想更进一步，您可以使用像 Grunt 这样的工具或 Gulp .它们允许自动化您的开发任务或构建过程。因此，理想情况下，在开发过程中，您可以有一个 grunt task 监视所有 sass 文件并自动将它们编译到 main.css 文件中。在您的 index.html 中，您可以引用此 main.css。一旦你高兴了，你还可以有另一个任务叫做 build task，它可以自动编译你所有的 css 文件并最小化它们。
澄清您的问题:
这取决于具体情况下什么是最好的，您拥有什么样的网站以及您是如何构建它的。
如果您有一个网站，访问者最有可能永远不会浏览该网站而不是某些特定页面，那么最好加载特定于该特定页面的 css 而不是合并它。您可以在特定于这些页面的部分中加载这些 css 文件。
根据我构建许多站点的经验，
script 标记。此外，我建议您花更多的时间来提高服务器端代码或数据库的效率，然后再过分担心 css。由于大部分低效率都在服务器端，因此效率会更高。
关于html - 一个大 css 文件与多个小 css 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32041281/