这就是任何网站上应该加载的 CSS 文件数量。
一
- 一个单页网站。
- 一个相当简单的网站，只有几个页面，而且差异不大。
- 一个博客或类似博客的网站，即使有数千个页面和分类法，它们看起来也基本相同。
二
- 一个具有全局设计模式的 Web 应用程序，以及在网站的不同部分使用的较少使用的设计模式。
- 内容丰富的网站，具有全局结构、网格和排版，以及为需要更多内容的网站特定部分加载的附加 CSS。
- 每个页面都非常独特的网站（全局和页面特定 CSS）。
- 大多数网站。
三
- 需要全局 CSS、部分特定 CSS 和一次性页面 CSS 的非常复杂的网站
我建议最多使用三个 CSS 文件。
这是部署的 CSS
当我提到一、二或三时，我指的是从已部署网站的头部链接的 CSS 文件。我指的是你作为开发人员编辑的 CSS 文件。为此，你应该在对你来说有意义的任何模块化块中进行工作。然后，这些模块化块将被组合成最终的部署文件集。你可以使用像 Rails Asset Pipeline 这样的工具，使用 CSS 预处理器，或使用像 CodeKit 这样的应用程序来实现这一点。
例如
全局 = main.css + grid.css + typography.css + buttons.css + print.css
站点部分 A = tabs.css + editor.css
站点部分 B = forms.css + video.css + details.css
在网站的“编辑器”部分加载的内容 = global.css & site-section-a.css
在网站的“详情”部分加载的内容 = global.css & site-section-b.css
一个不总是更好吗？
不。如果你想创建一个页面特定的 CSS 文件，并以某种方式将它需要的部分连接到那个单个文件，不要这样做。它看起来像是，嘿，一个请求比三个请求更好！但这样你就完全不能利用浏览器的缓存。
假设你处于典型的两个样式表场景中。当你浏览网站的特定部分时，除了第一个加载之外，所有这些页面加载都不需要加载任何 CSS 文件，因为它们已经缓存了。即使跳转到新的部分，也只需要加载一个新文件（全局文件已经缓存了）。
如果你为每个页面创建一个唯一的 CSS 文件，用户将需要为他们访问的每个页面请求一个新的样式表。
好的
现在你可以嘲笑我过度简化了问题。=)
完全同意。甚至没有必要单独使用重置或打印 CSS 文件……
是的，我认为这两件事都应该放在全局文件中。直到有一天，我们可以让浏览器只在需要时（打印时）请求打印样式表，在这种情况下，我建议将其移到 <link media=”print” …> 中。
我个人在大多数网站上使用一个 CSS 文件，但有一些情况下，我感觉需要 2 个或更多文件。很高兴知道你是怎么做到的，以及为什么你要这样做。
无论如何，感谢分享。
我只是想知道，当你在使用多个 jQuery 插件时，每个插件都有自己的 CSS 文件，你的建议是什么。例如，我经常使用 qTip2、fancybox 和 jQuery UI，甚至在 Web 应用程序中一起使用一个轮播插件。
你会下载到本地并合并它们吗？
谢谢，
Marty
是的，保留该文件独立，但将其连接到需要的任何文件（全局或部分特定，等等）。
你能详细说明你是如何将它们连接起来的吗？@import？Less？你也会以同样的方式处理打印样式表吗？
理论上，我想我们都同意这一点。但是，从 WordPress 的角度来说，你如何才能将所有这些插件生成的 CSS 文件都放在 1 或 2 个文件中，同时还能保持维护和更新的简便性？
感谢你的回答 :-)
我使用 W3TotalCache 来实现这一点。它在服务器端将所有 CSS 文件组合起来——你也可以对 JS 文件做同样的事情（如果它不会破坏你的网站）。
W3TC 最棒的一点是，你可以为登录用户禁用它——这有助于我进行调试。
我最近的习惯是使用 3 个文件。
1) Bootstrap min
2) Bootstrap responsive min
3) Style.css，包含我所有的调整。
我可能可以将前两个文件合并。
如果你在所有（或几乎所有）页面上都包含这些文件，那么就应该使用一个样式表，不要更多。
你应该使用响应式 Bootstrap 的媒体属性，这样你根本不需要使用 2 个样式表。
如果我只有一个页面，我会将 CSS 放在文档本身中，而不是放在单独的文件中。没必要通过网络获取一个页面的内容。
我建议不要这样做，因为你将无法获得缓存的全部好处。
最多，你只能使用特定 URL 的缓存。当你导航到其他页面时，你必须重新下载所有 CSS。将 CSS 放在外部文件中（即典型的做法）意味着所有 CSS 只需下载一次，然后缓存。
抱歉，我误读/误解了“如果我只有一个页面”这句话。
在这种情况下，是的，这是一个好主意（前提是该单个页面确实被浏览器正确缓存——例如，静态 HTML 文件就可以了，而 PHP 脚本则需要正确的设置）。
Chris，主题非常好，解释也很棒。
理想情况下，一个css文件是最好的选择。这样做是为了尽可能减少服务器调用次数，以便尽快加载HTML页面。
另一种加快页面加载速度的方法是尽可能减少图像数量，通过将css图像分组到图像精灵中。这样，例如，您只需要对一个图像精灵进行一次服务器调用，而不是对20个css图像进行20次服务器调用。
我认为Drupal在这方面采取了正确的做法
http://cl.ly/3U3l2A2H1Z0a3O3l3x2D
LOL!
说到正题，我希望ResourceLoader（MediaWiki组件）能够独立存在。这样，WordPress、Drupal以及您自己的PHP驱动的应用程序将拥有一个很棒的前端。
公平地说，在Drupal中，css文件可以很容易地在UI中优化成一个文件并进行缓存。如果您的Drupal安装是活动的，并且css文件还没有优化，那么您的操作是错误的。我看到作为示例的网站现在使用WP，它也存在类似的问题（尽管我相信WP也有类似于Drupal的解决方案）。http://note.io/1uQTt9s :)
您指的是“针对几个非常相似的页面定制的样式”吗？如果样式是真正针对单个页面的，那么您也可以将它们写到head中的style元素中。这样可以节省一个http请求。
但是，如果这些样式将在一个或多个页面上使用，那么通过将这些最小程度共享的样式放在单独的文件中，您可以提高可缓存性。
关键是，您需要足够多地重复使用它们，以弥补额外http请求带来的成本。
Chris，这篇文章很棒！
我个人在开发时使用多个css文件，在发布时将它们合并成一个文件。
我完全同意——然而，当我们尝试在一个大型客户网站上压缩和合并我们的CSS时，我们发现IE7对样式表有文件大小限制，超过这个限制，IE7将无法读取内容。因此，我们不得不将两个最大的合并样式表分成两个更小的文件。这非常令人沮丧，尤其是在你将它与其他IE限制结合起来时
IE（所有版本）：IE加载的CSS文件数量上限为32（一些资料甚至说31）。超过这个限制的任何CSS文件都将被忽略。
IE（所有版本）：Internet Explorer 将嵌套的 @import CSS 语句限制为从第一个链接的外部样式表开始的三个。来源
IE6/IE7：CSS文件大小限制约为285KB（取决于特定的样式表）
参考：IE CSS文件大小限制，IE8中的CSS大小限制
您看到了吗？http://blesscss.com/
OMG
我真的不知道这个问题。IE，你太糟糕了！你是一个糟糕的浏览器。
但很高兴知道bless存在（已加入书签）。我真的希望我永远不必使用它。
您对在一个只有一个页面的网站上使用嵌入式CSS有什么看法？我正在探索Humble Indie Bundle网站的HTML代码，发现他们使用了嵌入式CSS。
一些细节
- 该网站只有一个页面。
- 该网站在发布新捆绑包时会经历流量激增，然后是几乎为零的流量。
- 访问者可能会访问该网站一次，购买他们的捆绑包，然后直到发布新的捆绑包才会再次访问。
我一直在思考这个问题，我认为在这种情况下使用嵌入式CSS非常明智。通过嵌入CSS，而不是链接到CSS文件，他们避免了另一个HTTP请求。
您的想法呢？
我总是为网站使用一个css文件。
如果很多页面看起来相似，我会包含第二个样式表。
然后，如果我需要特定于页面的样式，我会将它们放在<style>标签中。
唉。我生活和工作在CMS的贫民窟里，这篇文章强烈地提醒了我这一点。哦，我多么渴望对工作的网站有更多控制权啊！
开发人员经常编写插件/扩展，无论你是否需要，它们都会加载样式表。他们几乎从不给你一个选择来放弃它们。偶尔我会提出这样的请求，但我认为他们的用户中没有足够多的人关心这个问题，以至于让他们觉得值得实现它。
当然，您可以四处寻找另一个插件来连接样式表，但我发现很难在Joomla网站上找到一个真正起作用的插件。
我找到的解决方案是使用Google的mod_pagespeed for Apache。它似乎无法找到并连接我想要的所有文件，但它有所帮助。
https://developers.google.com/speed/pagespeed/mod
感谢您让我抱怨；）
我使用四个。
总是我的单文件框架。
还有三个：tags.css、ids.css、classes.css
我用这种方法来分离我的样式表，效果很好。
–请原谅我的英文语法。–
WEIRD.
=)
哈哈！我现在实际上正在做各种糟糕的事情，与之相反的是，我发现html5允许这样做。我在body中首先创建.style.标签，没有将它们放在任何外部文件中，然后当我将css最终确定为我想要的样子时，例如在稳定运行一天左右后，我才将它们移到全局样式表中。
嗨，Kzqai，我不明白为什么这不好！我一直都在做这种快速而脏的处理方式，甚至包括内联样式，直到我的“客户”（实际上是我的老板）同意他们想要什么。如果是临时的，而且只有你在工作，谁在乎呢？:)
我处理过很多网站，它们只有一个主页，最多3或4个子页面。我倾向于将所有CSS放在一个文件中，因为它迫使我设计简单的可重复使用设计模式。我天生是一个还原主义者:-)
虽然我同意大多数意见，但我认为如果你想开发系统，最好应用第三级，以方便应用程序在短期和中期内的开发。
如果目标是减少响应时间，还有其他更有效的方法可以实现这一点，从缓存基本文件开始。
虽然我同意大多数意见，但我认为如果你想开发专业系统，最好应用第三级，以方便应用程序在短期和中期内的开发。
如果目标是减少响应时间，还有其他更有效的方法可以实现这一点，从缓存基本文件开始。
在您的第三个示例中，为什么不将所有三个样式表（全局CSS、特定于部分的CSS和一次性页面CSS）都放在一个文件中呢？
乍一看似乎效率低下，但即使是一千行额外的CSS也只有几kb。所以你只需让人们在第一次访问你的网站时下载所有内容，然后在他们访问的剩余时间里缓存样式表。
我可以看到这种方法对于流量很大的网站来说会很麻烦，因为每个kb都很重要。但对于99%的网站来说，这似乎是最快、最直接的方法。
抽象地谈论这些东西有点困难，但我试着说一下。在上面的“三个”示例中，我想到的是网站规模很大，有太多不同的部分，把它们都塞进一个样式表中是不切实际的。也许样式表将达到3MB或类似的大小（我见过，不止一次）。但至少它是缓存的，然后用于网站的每个页面，对吧？嗯，也许吧。对于移动设备来说，它太大了，无法被缓存，所以那里不行。而且最初的命中率太大了，可能不值得。通过分成三个，3MB就不再是3MB了，它变得如此有针对性，以至于可能变得非常小。比如100k，因为它只加载需要的东西，而不是整个网站的所有东西。而且它更好地利用了缓存。Global.css在所有地方都被使用，而且可能很小（对移动设备来说很好），并且被缓存。Site-section.css也是类似的，然后当人们浏览时，他们只需要下载任何（也可能非常小）特定于页面的CSS。
你完全正确。我目前正在参与一个项目，旨在减少网站调用的样式表和js文件数量。我们现在拥有的数量绝对是荒谬的，我想把它减少到每个页面大约3个。感谢您发布这篇文章！
Chris，我看到您使用了HTML解析器或类似的东西来允许HTML出现在评论中，而我恰好也遇到了这个问题，在一些需要完全转义的地方不起作用，而且似乎很难解决。
您使用的是什么解决方案，您推荐它吗？
抱歉，如果听起来很蠢！！！
但是，如果……我有一个网站，据说是博客网站，有很多相似页面，而我想参考多个 CSS……用于按钮、媒体和其他所有可能的可样式化元素？？？
会有什么影响呢？？？？
让我惊讶的是，有多少 web 开发人员过度复杂化了事物，而且需要像这样的一篇博客文章来告诉他们，“嘿，停止过度复杂化事物，只需将全局样式放在一个样式表中。” 好东西。
我喜欢您进行的简化，但是我不同意。我认为一个是最适合的，但只有在发送给客户端时。我相信您应该根据您的情况，按照最适合维护性的方式将 CSS 文件分开，然后在部署站点时将它们合并（有很多用于此的自动合并工具）。这样说来，我倾向于处理 web 应用程序而不是网站，因此网站可能会有所不同。我个人将它类似于下面看到的这样分开
重置
打印
通用 CSS
页面特定
用户控件特定
库特定（jquery、treeview…）
浏览器特定
当它在页面上呈现时，它是一个文件，一个请求。如果有人发现这样做有问题，请告诉我，因为我仍然想知道如何改进它。
我必须过度分析事物。我在每个页面上使用一个样式表，每个部分使用不同的样式表。这是因为访问我工作网站的不同部分的人可能不会看到网站的其他部分。学生永远不会看到老师的管理界面，因此他们永远不需要那个样式表信息。他们需要一个学生样式表。两种设计都共享通用元素，但是我不会将这些共性存储在“全局” CSS 文件中（它不是真正的全局，只是在这两个用户之间共享——面向公众的网站完全不同，又是！），我只是将它包含在 Sass 中并将其编译到每个表中。
对我来说听起来很聪明。
我 99% 的工作都在现成的 CMS（Drupal、EE、WP）中。主要是 Drupal 和 EE。Drupal 具有一个内置设置，用于合并 CSS 和 javascript 文件。但是，由于某种原因，这样做通常会失败。而且说实话，Drupal 以其强大和灵活而闻名，而不是其效率。单个页面加载的浏览器请求数量惊人。
但是，当使用表达式引擎或自己编写时，我非常喜欢使用 HTML5 模板。1 个样式表，响应式，移动优先。
我不知道 IE 选择器限制错误。幸运的是，我认为我从未创建过使用那么多选择器的网站。
我的方法是拥有多个 LESS 文件（重置、网格、混合、布局、导航、页眉、页脚、排版、主页……），它们将我的样式分成逻辑文件，这样当我需要调整某些内容时，我会立即知道它在哪个文件中。由于它们被这样拆分，因此文件通常很小（小于 500 行），因此找到精确的样式非常快。
为了将它们整合在一起，我使用一个带有 @import 的 LESS 文件，然后使用一个自定义 php 文件来最小化、gzip 和缓存输出到一个文件中。
我正在构建一个相对较大的网站，到目前为止，我只用了 147 个选择器，所以我在 IE 错误方面做得很好。我预计在我开始对其进行皮肤化时会有更多，但我认为我不会接近错误阈值大约 4000 的水平。
Laurence,
这听起来太……太优雅了！我嫉妒你的工作流程！
绝对同意。只是想指出，这对于 JavaScript 文件也是一种很棒的方法。没有理由让数十个 JS 文件加载到每个页面上。
您加载的越少，网站的速度就越快——您的 SEO 就越好。
我总是有一个重置 CSS 文件……所以对我来说至少有 2 个 CSS 文件。
为什么不在您的“正常”样式表中包含重置？只是想知道原因，不是在阴阳怪气：D 我通常将我的保留在主样式表中。
我这样调用一个文件：
<link rel="stylesheet" href="./style.css?template=page">。然后 php 将该页面的所有内容编译到一个表中，只进行一次 HTTP 请求。我通常最多到 3 个，但从未超过这个数字。
我的结构通常是；
核心布局（结构）
样式（排版、渐变、边框等等——主要内容）
页面特定内容（例如，为滑块或独特元素设置样式）。
我的重置等都在核心布局表中，因为我喜欢将事物分开。
结构和样式样式表是全站使用的吗？为什么你不将它们合并？你可以在开发过程中将它们分开，但可以在生产中将它们合并。
W3TotalCache 看起来很有趣，看起来每个 WP 网站都需要它：）。但我没有使用 WP，并且我在我的模板引擎中解决了这个“问题”。每个模板文件都可以在头部部分插入多个 CSS、LESS 或 JS 文件。服务器端脚本会评估每个文件，并在必要时对其进行（重新）编译。然后它将所有文件添加到单个缓存文件中。每个文件组合的缓存键都是唯一的。这样一来，每个页面都具有最少的 css，但所有内容仍然整齐地分成多个文件以供开发。该系统还具有开发模式，其中所有文件都是单独嵌入的。（LESS 显然仍然被编译）。
这使得构建可重用模块并保持其 js/css 占用空间很小变得容易。
我意识到并非每个人都可以实现这一点。但是，如果您完全控制服务器端代码（可能是您自己的 CMS），我可以告诉您，这个系统让我非常高兴；）
对于那些编程经验很少的人，请查看 cloudflare.com。我本周一直在测试它们，它在解决性能问题方面看起来很棒。他们还提供了一个系统，可以将所有 CSS 和 JS 结合到现有网站中。对于某些人来说可能是一个选择。
我认为应该使用第四层来表示受众（订阅、语言、权限等）。示例：free_trial.css、year_subscription.css、german.css、canadi_fr.css、admin.css、read_only.css
网络越来越快，浏览器渲染的速度也越来越快。我最近完成了一个基于 twitter bootstrap 的项目。在开发过程中，我只是包含了 bootstrap 提供的所有 less 和 JS 文件。最后我清理了。但我没有发现任何速度差异（好吧，我是人）。那么为什么还要麻烦呢？
或者您是否关心可以节省的 10KB 加载量？您可以先看看您的图片。
一如既往的棒。
我对自己很满意，因为在这篇文章之前，我实际上对包含多个样式表有一些了解。这真是一个改变！
喜欢更高频率的发布……
我完全同意这篇文章——自 2006 年以来，我一直将模块化 CSS 应用于电子商务平台。核心样式表会传递到每个页面，然后一系列 @import 会在服务器端合并和最小化，然后注入到 . 中。
简单：)
完全同意您的观点。完全合并 CSS 只有在始终使用相同的 CSS 文件或所有 CSS 文件都不同的情况下才有用。如果部分 CSS 文件相同，您的方法是实现最佳性能的唯一优化方法。
酷炫的文章。我们 Yandex 也在考虑这个问题。我们有一些工具原型可以为页面构建 CSS（以及其他静态文件，即 JS），但它是基于站点上用户会话的一些真实统计数据。这允许处理站点结构或使用块更改的情况，因此工具可以重新布局哪些块组合的样式应该合并到单独的捆绑文件中。
这里有一个链接：https://github.com/mihaild/ybundler（不幸的是，README 目前只有俄语，但测试和命令行帮助是英文）。
嗨，Chris！
我也是来自 Yandex 的前端开发人员。
这是一个包含 100 多项服务的门户网站，当然我们也考虑了很多关于管理 CSS 文件的问题。通常，每个页面都有 1 个 CSS 文件。但有时更多。根据项目结构，common.css 文件可能会出现。
通过分析每个服务中最受欢迎的页面，我们可以快速更改 CSS 方案。这些信息可以影响我们构建文件的方式。所有这些都是自动完成的，因为我们不编写纯页面 CSS，而是以块（页面的不同部分）的形式声明性地描述我们的页面。因此，我们可以根据缓存推理生成任意数量的 CSS 文件。
这仅仅是我们称为 BEM 的前端方法的众多优势之一。如果您有兴趣，可以通过以下链接了解更多信息：http://bem.github.com/bem-method/pages/beginning/beginning.en.html
如果您能提供反馈，我将不胜感激 :-)