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