css - 合并 CSS 文件 : per site or per page template?

Question

我们都知道我们应该将我们的 CSS 合并到一个文件中，但是是按站点还是按页面？我发现了两者的优缺点。

场景如下:

• 大型网站
• CSS 文件分解为一个文件用于全局样式，多个文件用于模块

解决方案 A:将整个站点的所有 CSS 文件合并到一个文件中:

最好的部分是，在第一次点击后，一个文件将被缓存在每个页面上!不利之处在于，随着命名空间冲突机会的增加，选择器(类和 ID)的命名约定变得更加重要。您还需要一个系统，用于在不同的页面上对同一模块进行不同的样式设置。这会导致你的 CSS 中有额外的选择器，这对浏览器来说更有效。这可能会在 iPad 等没有那么多内存和处理能力的移动设备上引起问题。如果您将媒体查询用于响应式设计，那么在添加额外样式时，问题会更加复杂。

解决方案 B:每个页面模板合并一个 CSS 文件:

(我所说的页面模板是指一种布局，但有许多不同的页面，例如文章页面)在这种情况下，您失去了上述选择的大部分问题，但也失去了一些缓存优势。这种技术最糟糕的部分是，如果您在 2 个不同的页面模板上有相同的样式，那么它们将被下载两次，每个页面一次!例如，您的所有全局文件都会发生这种情况。 :(

总结:

因此，正如编程中常见的那样，这两种解决方案都不是完美的，但如果有人遇到过这个问题并找到了答案，我很乐意听到!特别是，如果您知道任何有助于解决解决方案 A 的选择器问题的技术。

Answer 1

当然，合并并缩小所有全局样式，例如您的站点模板、排版、表单等。我还会考虑将最重要和最常用的模块样式合并到全局样式表中，当然是您计划的样式表在主页或入口点上使用。

解决方案 B 不是一个好的解决方案:用户最终会为每个独特的布局/页面下载相同的内容，而您本可以从最后一个页面的缓存中加载部分内容。这种方法没有任何优势。

对于其余部分，我会将它们分开(并缩小)并根据需要单独加载它们。您可以使用任何 preloading Yahoo! 上描述的技术开发者网络的“加速网站的最佳实践”指南，用于预先加载用户的缓存:

Preload Components

By preloading components you can take advantageof the time the browser is idle and request components (like images,styles and scripts) you'll need in the future. This way when the uservisits the next page, you could have most of the components already inthe cache and your page will load much faster for the user. There are actually several types of preloading:

• Unconditional preload - as soon as onload fires, you go ahead and fetch some extra components. Check google.com for an example of how asprite image is requested onload. This sprite image is not needed onthe google.com homepage, but it is needed on the consecutive searchresult page.

• Conditional preload - based on a user action you make an educated guess where the user is headed next and preload accordingly. Onsearch.yahoo.com you can see how some extra components are requestedafter you start typing in the input box.

就冲突的选择器而言:合并所有文件并以任何其他方式执行应该不会有什么不同，这是您设计的问题。如果可能，让所有模块以某种方式“命名空间”，也许通过为特定于模块的类使用通用前缀，如 blog-header 或 storefront-title。有一个概念叫"Object-oriented CSS"这可能会减少对大量冗余 CSS 和特定于模块的类名的需求，但这通常是在设计阶段完成的，而不是您可以“添加”到现有元素中的。

HTTP 请求越少越好，但您必须考虑文件大小以及用户行为和事件。入口页面的初始下载时间是最重要的，因此您不想因为以后不会用到的东西而陷入困境。如果您真的想处理这些数字，请尝试一些不同的方法并使用 Firebug 或 Chrome 的开发者工具分析您的网站。