我们都知道我们应该将CSS合并到一个文件中,但每个站点或每页？我找到了两者的亲和缺点.
这是场景:
最好的部分是在初始命中后,每个页面上都会缓存一个文件!缺点是,随着命名空间冲突的机会增加,选择器(类和id)的命名约定变得更加重要.您还需要一个系统,在不同的页面上以不同方式设置相同模块的样式.这会在CSS中产生额外的选择器,这对浏览器来说更有用.这可能会导致像iPad这样没有太多内存和处理能力的移动设备出现问题.如果您使用媒体查询进行响应式设计,那么当您添加额外的样式时,您的麻烦就会更加复杂.
(通过页面模板,我的意思是一个布局,但许多不同的页面,如文章页面)在这种情况下,您将失去上述选择的大部分问题,但您也失去了一些缓存优势.这项技术最糟糕的部分是,如果你在2个不同的页面模板上有相同的样式,那么它们将被下载两次,每个页面一次!例如,所有全局文件都会发生这种情况.:(
因此,正如编程中常见的那样,这两种解决方案都不是完美的,但如果有人遇到这种情况并找到答案,我很乐意听到它!特别是,如果您知道任何有助于解决方案A的选择器问题的技术.
当然，组合并缩小所有全局样式，例如您的网站模板、排版、表单等。我还会考虑将最重要和最常用的模块样式组合到全局样式表中，当然是您计划使用的样式主页或入口点。
解决方案 B 不是一个好的方案：用户最终会为每个独特的布局/页面下载相同的内容，而您本可以从最后一页的缓存中加载其中的一部分。这种方法没有任何优点。
对于其余的，我会将它们分开（并缩小），然后根据需要单独加载它们。您可以使用Yahoo! 上描述的任何预加载技术。开发者网络的“加速网站速度的最佳实践”指南，用于预先加载用户的缓存：
预载组件
通过预加载组件，您可以利用浏览器空闲的时间来请求将来需要的组件（如图像、样式和脚本）。这样，当用户访问下一页时，您可以将大部分组件都存储在缓存中，并且您的页面将为用户加载得更快。预加载实际上有几种类型：
无条件预加载 - 一旦 onload 触发，您就可以继续获取一些额外的组件。请查看 google.com，了解如何请求加载精灵图像的示例。google.com 主页上不需要此精灵图像，但连续搜索结果页面上需要它。
有条件预加载 - 根据用户操作，您可以有根据地猜测用户接下来要去哪里，并相应地进行预加载。在 search.yahoo.com 上，您可以看到在输入框中开始键入内容后如何请求一些额外的组件。
就冲突的选择器而言：组合所有文件并以任何其他方式执行应该不会产生影响，这是您的设计的问题。如果可能的话，让所有模块以某种方式“命名空间”，也许通过使用特定于模块的类的公共前缀，例如blog-header或storefront-title。有一个称为“面向对象的 CSS”的概念，它可能会减少对大量冗余 CSS 和特定于模块的类名的需求，但这通常是在设计阶段完成的，而不是您可以“附加”到现有项目的东西。
HTTP 请求越少越好，但您必须考虑文件大小以及用户行为和活动。入口页面的初始下载时间是最重要的，所以你不想让它陷入稍后才使用的东西。如果您确实想计算数字，请尝试一些不同的方法并使用 Firebug 或 Chrome 的开发人员工具分析您的网站。