你想要两个世界。

您需要多个CSS文件，因为浪费您的理智是一件可怕的事情。

同时，最好有一个单一的大文件。

解决方案是使用某种机制将多个文件合并为一个文件。

一个例子是

<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />

然后，allcss.php脚本处理连接文件并传递它们。

理想情况下，脚本会检查所有文件的mod日期，如果其中任何一个文件发生变化，则创建一个新的组合，然后返回该组合，然后检查if - modified HTTP头，以便不发送多余的CSS。

这让你两全其美。也适用于JS。

我通常有一些CSS文件:

一个用于重置和全局样式的“全局”CSS文件 “模块”特定的CSS文件用于逻辑分组的页面(可能是结帐向导或其他东西中的每个页面) 用于覆盖页面的“page”特定CSS文件(或者，将其放在单个页面的块中)

我真的不太关心CSS文件的多页请求。大多数人都有不错的带宽，我相信还有其他优化会比将所有样式组合到一个单独的CSS文件中产生更大的影响。在速度和可维护性之间进行权衡，我总是倾向于可维护性。YUI压缩机听起来很酷，但我可能要检查一下。

也许可以看看compass，这是一个开源的CSS创作框架。 它基于Sass，所以它支持一些很酷的东西，比如变量、嵌套、mixin和导入。如果您想要保持独立的较小CSS文件，但将它们自动合并为一个(避免多次缓慢的HTTP调用)，则导入非常有用。 Compass在此基础上增加了一组预定义的mixin，便于处理跨浏览器的东西。 它是用Ruby编写的，但是它可以很容易地用于任何系统....

像Sass或LESS这样的CSS编译器是一个很好的方法。通过这种方式，你可以为网站交付一个最小化的CSS文件(这将比普通的单个CSS源文件小得多，速度也快得多)，同时保持最好的开发环境，所有东西都整齐地分割成组件。

Sass和LESS具有变量、嵌套和其他方法的附加优势，使CSS更容易编写和维护。强烈推荐。我个人现在使用Sass (SCSS语法)，但以前使用LESS。两者都很棒，好处相似。一旦你用编译器编写了CSS，你就不太可能不需要编译器。

http://lesscss.org

http://sass-lang.com

如果你不想在Ruby上浪费时间，这个Mac版的LESS编译器非常棒:

http://incident57.com/less/

或者你可以使用CodeKit(同样的人):

http://incident57.com/codekit/

WinLess是一个用于编译LESS的Windows GUI

http://winless.org/

从历史上看，使用单个CSS文件的主要优势之一是使用HTTP1.1时的速度优势。

然而，截至2018年3月，超过80%的浏览器现在支持HTTP2，它允许浏览器同时下载多个资源，以及能够预先推送资源。为所有页面使用一个CSS文件意味着文件大小大于所需大小。有了适当的设计，我不认为这样做有任何好处，除了更容易编码。

HTTP2的最佳性能的理想设计是:

有一个核心CSS文件，其中包含所有页面使用的常用样式。 有页面特定的CSS在一个单独的文件 使用HTTP2推送CSS来最小化等待时间(可以使用cookie来防止重复推送) 可选地在折叠CSS上面分开，先推这个，然后再加载剩下的CSS(适用于低带宽移动设备) 如果您想加快未来的页面加载速度，还可以在页面加载后加载站点或特定页面的剩余CSS。

I've created a systematic approach to CSS development. This way I can utilize a standard that never changes. First I started with the 960 grid system. Then I created single lines of css for basic layouts, margins, padding, fonts and sizes. I then string them together as needed. This allows me to keep a consistent layout across all of my projects and utilize the same css files over and over. Because they are not specific. Here's an example: ----div class="c12 bg0 m10 p5 white fl"/div--- This means that the container is 12 columns across, utilizes bg0 has margins of 10px padding of 5 the text is white and it floats left. I could easily change this by removing or adding a new - What I call a "light" style- Instead of creating a single class with all these attributes; I simply combine the single styles as I code the page. This allows me to create any combination of styles and does not limit my creativity or cause me to create a massive number of styles that are similar. Your style sheets become a lot more manageable, minimized and allow you to re-use it over and over. This method I have found to be fantastic for rapid design. I also no longer design first in PSD but in the browser which also saves time. In addition because I have also created a naming system for my backgrounds and page design attributes I simply change out my image file when creating a new project.(bg0 = body background according to my naming system) That means that if I previously had a white background with one project simply changing it to black simply means that on the next project bg0 will be a black background or another image..... I have not found anything wrong with this method yet and it seems to work very well.