6

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

这是场景：

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

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

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

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

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

概括：

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

4

2 回答 2

1

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

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

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

预加载组件

通过预加载组件，您可以利用浏览器空闲的时间并请求您将来需要的组件（如图像、样式和脚本）。这样，当用户访问下一页时，您可能已经在缓存中拥有大部分组件，并且您的页面将为用户加载更快。实际上有几种类型的预加载：

  • 无条件预加载 - 一旦 onload 触发，您就继续获取一些额外的组件。查看 google.com 以获取有关如何请求加载精灵图像的示例。在 google.com 主页上不需要此精灵图像，但在连续搜索结果页面上需要。

  • 条件预加载 - 根据用户操作，您可以有根据地猜测用户接下来要去哪里并相应地进行预加载。在 search.yahoo.com 上，您可以看到在输入框中开始输入后如何请求一些额外的组件。

就冲突的选择器而言：组合所有文件并以任何其他方式进行操作都不会产生影响，这是您设计的问题。如果可能的话，以某种方式让所有模块“命名空间”，也许通过使用特定于模块的类的公共前缀，比如blog-headeror storefront-title。有一个称为“面向对象的 CSS”的概念可能会减少对大量冗余 CSS 和特定于模块的类名的需求，但这通常是在设计阶段完成的，而不是你可以“附加”到现有项目的东西.

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

于 2012-07-17T02:32:48.607 回答
0

我认为您可以制作需要每个模板的存储样式的 global.css。

您可以在每个模板中制作 css。

或者简单地使用像lescss这样的 css 框架

于 2012-07-17T02:51:40.777 回答