CSS 是否在单独的文件中？

Question

哪个是更好的选择:将 CSS 存储在单独的文件中还是在同一页面中？

让我们忘记这样一个事实，即更改文件上的 CSS 会使其直接应用所有 HTML 页面。我正在使用动态语言生成整个输出 - 所以这无关紧要。

我能想到的几点:

1. 单独文件上的 CSS 产生较少的带宽负载。
2. 单独文件上的 CSS 需要另一个 HTTP 请求。

另一方面，如果我用 Zlib 压缩数据传输，同一页面上的 CSS 在带宽方面应该无关紧要，对吗？所以，我少了一个 HTTP 请求？

Answer 1

外部 CSS 文件的主要好处是:

• 它可以在多个页面上使用；和
• 它可以缓存，因此不需要在每个页面上加载。

因此，如果有可能在页面之间或同一页面的多个 View 上重用动态生成的 CSS，那么外部文件可能会增加值(value)。

动态生成的 CSS 有几种常见的模式。

<强>1。为页面生成子集

我偶尔会看到这个。开发人员决定通过仅发送必要的内容来限制每页的 CSS 数量。我不认为你是这种情况，但我提到它是为了完整性。这是一种误入歧途的优化努力。发送全部并有效地缓存它更便宜。

<强>2。用户选择的主题

如果用户为您的网站选择了特定的外观，这就是我所说的。这意味着他们可能会选择整个 CSS 包，并且可能只有有限的一组可供选择。通常这将通过拥有一个或多个基础 CSS 文件以及一个或多个主题 CSS 文件来完成。这里最好的解决方案是通过使用正确的 <link> 动态生成页眉来发送正确的外部 CSS 文件组合。元素，然后有效地缓存这些文件。

<强>3。用户滚动主题

这超出了 (2)，用户可以选择颜色、字体和大小，以至于您无法将这些选择打包到一个主题包中，但您必须为此生成一组 CSS用户。在这种情况下，您可能仍然有一些通用的 CSS。将其作为外部 CSS 文件发送(再次有效地缓存它们)。

动态内容可能最好放在页面上，或者您仍然可以使用外部文件，因为没有理由 <link>不能指向脚本而不是静态文件。例如:

<link rel="stylesheet" href="/css/custom.php?user=bob" type="text/css"> 

其中查询字符串由您的 header 动态生成，来自登录者。该脚本将查找用户首选项并生成动态 CSS 文件。这可以有效地缓存，而不能将其直接放在 HTML 文件中(除非可以有效地缓存整个 HTML 文件)。

<强>4。基于规则的 CSS 生成

我之前写过一个报告系统，它采用了用户或报告编写者指定的大量规则和自定义报告，并生成了一个完整的 HTML 页面(基于他们在自定义中请求的表格和/或图表)报告定义)并根据规则设置样式。这确实是动态 CSS。事情是，这里也有缓存的潜力。 HTML 页面生成如下动态链接:

<link rel="stylesheet" href="/css/report.annual-sales.0001.css" type="text/css"> 

其中 'annual-sales' 是报告 ID，0001 就像一个版本。当规则改变时，您创建一个新版本，每个报告的每个版本都可以有效地缓存。

结论

所以我不能明确地说外部 CSS 文件是否适合您，但是在看到并针对上述每种情况进行开发后，我很难相信您无法从您的网站中获得某种形式的缓存CSS，此时它应该是外部的。

我在 Supercharging CSS in PHP 中写过关于有效 CSS 的问题。但这些原则和技术适用于任何语言，而不仅仅是 PHP。

您可能还想引用相关问题 Multiple javascript/css files: best practices?