一个巨大的.css文件与多个较小的具体.css文件？
有一个单一的怪物.css文件，包含将在几乎每个页面上使用的样式元素有什么好处吗？
我在想，为了便于pipe理，我想将不同types的CSS分成几个文件，并且在我的主要<link />包含每个文件都很糟糕？
我觉得这样比较好
- positions.css
- buttons.css
- tables.css
- copy.css
与
- 的site.css
你有没有看到任何一种方式与其他方式？
这是一个难以回答的问题。 在我看来，这两个选项都有其优点和缺点。
我个人不喜欢通过一个巨大的CSS文件阅读，并保持它是非常困难的。 另一方面，将其分开会导致额外的http请求，这可能会减慢速度。
我的意见将是两件事情之一。
1）如果你知道你的CSS一旦创build就永远不会改变，我会在开发阶段（为了便于阅读）创build多个CSS文件，然后在上线前手动合并它们（以减lesshttp请求）
2）如果你知道一段时间你会改变你的CSS，并且需要保持它的可读性，我会build立单独的文件并使用代码（假如你使用某种编程语言） 运行时编译时间（运行时缩小/组合是资源猪）。
使用这两个选项之一，我会强烈build议在客户端caching，以进一步减lesshttp请求。
编辑：
我发现这个博客展示了如何在运行时使用除了代码之外的任何东西。 值得一看（虽然我还没有testing它自己呢）。
编辑2：
我已经决定在我的devise时间使用单独的文件，并构build过程来缩小和合并。 通过这种方式，我可以在运行时开发单独的（可pipe理的）css，并且可以使用适当的单片缩小文件。 而且我还有我的静态文件和更less的系统开销，因为我没有在运行时进行压缩/缩小。
注意：因为你在那里购物，所以我强烈build议使用捆绑器作为你的构build过程的一部分。 无论您是从IDE还是从构build脚本构build，捆绑器都可以通过附带的exe在Windows上执行，也可以在任何已经运行node.js的计算机上运行。
像Sass或LESS这样的CSS编译器是一个很好的select。 这样，您就可以为网站提供一个最小化的CSS文件（这个文件比正常的单个CSS源文件要小得多，而且速度要快），同时保持最好的开发环境，把所有东西都整齐地分解成组件。
Sass和LESS具有variables，嵌套和其他方法的附加优势，使CSS更容易编写和维护。 极力推荐。 我个人现在使用Sass（SCSS语法），但之前使用了LESS。 两者都很好，同样有好处。 一旦你编写了一个编译器的CSS，不太可能你不想做一个。
如果你不想搞乱Ruby，这个Mac版LESS编译器非常棒：
或者你可以使用CodeKit（由同样的人）：
http://incident57.com/codekit/
WinLess是用于编译LESS的Windows GUI
我更喜欢在开发过程中多个CSS文件。 pipe理和debugging更容易。 不过，我build议你在部署的时候使用一个CSS缩小工具，比如YUI Compressor ，它会把你的CSS文件合并成一个单一的文件。
只有一个CSS文件对于页面加载时间更好，因为这意味着更less的HTTP请求。
有几个小CSS文件意味着开发更容易（至less，我认为是这样的：应用程序的每个模块有一个CSS文件使事情变得更容易） 。
所以这两种情况都有很好的理由
一个解决scheme，可以让你得到最好的两个想法将是：
- 开发使用几个小的CSS文件
- 即更容易发展
- 为了让你的应用程序有一个构build过程，将这些文件合并为一个
- 这个构build过程也可以缩小那个大文件，顺便说一句
- 这显然意味着你的应用程序必须有一些configuration的东西，允许它从“多文件模式”切换到“单文件模式”。
- 而在生产中使用，只有大文件
- 即更快的加载页面
还有一些软件可以在运行时将CSS文件组合起来，而不是在编译时进行。 但是在运行的时候这样做意味着要多吃一点CPU （并且显然需要一些caching机制，不要经常重新生成大文件）
你想要两个世界。
你想多个CSS文件，因为你的理智是一个可怕的东西浪费。
同时，最好有一个大的文件。
解决scheme是有一些机制，将多个文件合并到一个文件中。
一个例子是类似的
<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />
然后，allcss.php脚本处理连接文件并传递它们。
理想情况下，脚本将检查所有文件的moddate，如果其中任何一个文件发生更改，则创build一个新的复合文件，然后返回该复合文件，然后检查If-Modified HTTP标头，以便不发送冗余CSS。
这给你两全其美。 对JS也很好用。
单片样式表提供了很多好处（在其他答案中有所描述），但根据样式表文档的整体大小，您可能会在IE中遇到问题。 IE有一个限制，它将从一个文件中读取多less个select器。 限制是4096个select器。 如果你是单一的样式表将有更多比这个，你会想分裂它。 这个限制只会增加它在IE中的难看的头。
这是所有版本的IE浏览器。
请参阅Ross Bruniges博客和MSDN AddRule页面 。
有一个临界点有利于有多个CSS文件。
一个拥有1M +页面的网站（普通用户可能只会看到其中的5个页面）可能会有大量的样式表，因此尝试通过大量的初始下载来节省每页加载的单个额外请求的开销经济。
将参数拉伸到极限 – 就像是build议应该为整个Web维护一个大的样式表。 显然无意义。
尽pipe每个站点的临界点都不相同，但是没有硬性规定。 它将取决于每页的唯一CSS数量，页面数量以及平均用户在使用网站时可能经常遇到的页面数量。
也许看看指南针 ，这是一个开源的CSS创作框架。 它基于Sass，所以它支持像variables，嵌套，混合和导入等很酷的东西。 特别是如果你想保持独立的较小的CSS文件，但将它们自动合并为1（避免多个缓慢的HTTP调用），则导入非常有用。 Compass增加了一大组预定义的混合，这些混合很容易处理跨浏览器的东西。 这是用Ruby编写的，但它可以很容易地用于任何系统….
我更喜欢多个CSS文件。 这样就可以更容易地根据需要调换“外观”。 一个单片文件的问题是它可能失去控制，很难pipe理。 如果你想要蓝色背景，但不想button改变？ 只是改变你的背景文件。 等等。
我通常有一些CSS文件：
- 一个“全球”的CSS文件重置和全球风格
- “模块”特定的CSS文件的逻辑分组的页面（也许每个结帐向导页面或东西）
- “page”特定的css文件覆盖页面（或者把它放在单个页面上的一个块中）
我不太关心CSS文件的多个页面请求。 大多数人都有体面的带宽，我相信还有其他的优化，比将所有样式合并成一个monolitic CSS文件，会有更大的影响。 速度和可维护性之间的折衷，我总是倾向于可维护性。 YUI comperssor听起来很酷，但我可能要检查一下。
这里是最好的方法：
- 用所有的共享代码创build一个通用的css文件
- 插入所有特定页面的CSS代码到同一个页面，在标签或每个页面使用属性style =“”
在这种方式你只有一个共享代码和HTML页面的CSS。 顺便说一句（我知道这不是正确的话题），你也可以用base64编码你的图像（但你也可以用你的js和css文件）。 通过这种方式可以将更多的http请求减less到1个。
SASS和LESS使这一切真的是一个有争议的问题。 开发人员可以设置有效的组件文件，并在编译时将其组合在一起。 在SASS中，您可以在开发过程中closures压缩模式，以便读取，然后重新开始生产。
http://sass-lang.com http://lesscss.org
最后，无论您使用何种技术，单个缩小的CSS文件都是您想要的。 更less的CSS，更less的HTTP请求，更less的服务器需求。
单个CSS文件的优点是传输效率。 每个HTTP请求都意味着每个请求的文件都有一个HTTP头响应，并且需要带宽。
我将我的CSS作为一个PHP文件，在HTTP头中使用“text / css”MIMEtypes。 这样，我可以在服务器端有多个CSS文件，并使用PHP包含在用户请求时将它们推送到单个文件中。 每个现代浏览器都会接收到带有CSS代码的.php文件，并将其作为.css文件进行处理。
您可以使用一个CSS文件的性能，然后评论这样的部分：
/******** Header ************/ //some css here /******* End Header *********/ /******** Footer ************/ //some css here /******* End Footer *********/
等等
我正在使用Jammit处理我的css文件，并使用许多不同的文件的可读性。 Jammit在部署生产之前做所有的组合和压缩文件的肮脏工作。 这样，我有很多正在开发的文件，但只有一个文件在生产。
我已经创build了一个系统的CSS开发方法。 这样我可以利用一个永远不会改变的标准。 首先，我开始使用960网格系统。 然后，我创build了基本的布局，边距，填充，字体和大小的单行的CSS。 然后根据需要将它们串起来。 这使我可以在所有项目中保持一致的布局，并反复使用相同的css文件。 因为它们不是特定的。 这里是一个例子：—- div class =“c12 bg0 m10 p5 white fl”/ div —这意味着容器是12列跨越，利用bg0具有10px的边距5，文本是白色的，它漂浮剩下。 我可以很容易地通过删除或添加一个新的 – 我所说的“光”样式来改变这个 – 而不是用所有这些属性创build一个类。 我简单地结合了单一的风格，因为我编码的页面。 这使我可以创build任何风格的组合，不会限制我的创造力，也不会造成大量类似的风格。 您的样式表变得更容易pipe理，最小化，并允许您反复使用它。 我发现这种方法对于快速devise来说是非常棒的。 我也不再是在PSDdevise，而是在浏览器，这也节省了时间。 另外，因为我还创build了一个用于我的背景和页面devise属性的命名系统，所以当创build一个新项目时，我只需更改我的图像文件（根据我的命名系统，bg0 =正文背景）。这意味着如果我以前有白色背景与一个项目简单地将其更改为黑色只是意味着在下一个项目bg0将是一个黑色的背景或另一个图像…..我还没有发现这个方法有什么问题，它似乎工作得很好。
捆绑的样式表可能会节省页面加载性能，但浏览器在您所在的页面上呈现animation的速度越慢，样式越多。 这是由于大量未使用的样式可能不在您所在的页面上，但浏览器仍需计算。
参见： https ： //benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
捆绑的样式表优点： – 页面加载性能
捆绑的样式表缺点： – 较慢的行为，这可能导致在滚动，交互性，animation，
结论：为了解决这两个问题，对于生产来说，理想的解决scheme是将所有的css合并到一个文件中以保存http请求，但是使用javascript从该文件中提取出您所在页面的css并用它更新头部。
要知道每个页面需要哪些共享组件，为了降低复杂性，最好声明这个特定页面使用的所有组件，例如：
<style href="global.css" rel="stylesheet"/> <body data-shared-css-components="x,y,z">
