CSS是否在单独的文件上？

哪一个是更好的选择：将CSS存储在单独的文件或同一页面上

让我们忘记这样一个事实：更改文件上的CSS会使它直接应用所有HTML页面。我使用动态语言来生成整个输出，所以这并不重要

我能想到几件事：

单独文件上的CSS生成的带宽负载更少

单独文件上的CSS需要另一个HTTP请求

---

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

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

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

所以，如果有可能在页面之间或在同一页面的多个视图上重用动态生成的CSS，那么外部文件可以增加价值

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

1。为页面生成子集

我偶尔会看到这个。开发人员决定通过只发送必要的内容来限制每页CSS的数量。我不认为这是你的情况，但我提到它的完整性。这是一个错误的优化努力。发送整批数据并将其有效缓存会更便宜

2。用户选择的主题

如果用户为你的站点选择了一个特定的外观，这就是我要说的。这意味着他们可能会选择整个CSS包，并且可能有有限的一组可供选择。通常，这将通过拥有一个或多个基本CSS文件，然后拥有一个或多个主题CSS文件来实现。这里最好的解决方案是通过使用正确的

元素动态生成页眉，然后有效地缓存这些文件，从而发送外部CSS文件的正确组合

3。用户滚动主题

这超出了（2）用户可以选择的范围，比如颜色、字体和大小，以至于您无法将这些选择打包到单个主题包中，但您必须为该用户生成一组CSS。在这种情况下，您可能仍然有一些常见的CSS。将其作为外部CSS文件发送（同样，有效地缓存它们）

动态内容可能在页面上最好，或者您仍然可以使用外部文件，因为

没有理由不能指向脚本而不是静态文件。例如：

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

其中，查询字符串由登录用户的标头动态生成。该脚本将查找用户首选项并生成一个动态CSS文件。这可以有效地缓存，而将其直接放在HTML文件中是不可能的（除非整个HTML文件可以有效地缓存）

4。基于规则的CSS生成

在此之前，我编写过一个报告系统，它接受了用户或报告编写者指定的许多规则和自定义报告，并生成了一个完整的HTML页面（基于自定义报告定义中要求的表和/或图表），并根据规则对其进行样式设置。这确实是动态CSS。问题是，这里也有缓存的潜力。HTML页面生成如下动态链接：

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

其中“年度销售额”是报告ID，0001类似于一个版本。当规则更改时，您将创建一个新版本，并且可以有效地缓存每个报表的每个版本

结论

因此，我无法确定外部CSS文件是否适合您，但我已经看到并开发了上述每个场景，我很难相信您无法从CSS中获得某种形式的缓存，此时它应该是外部的

我曾在中写过关于有效CSS的问题，但其原理和技术适用于任何语言，而不仅仅是PHP

---

您可能还想参考相关的问题

浏览器可以缓存CSS文件（除非更改很多）。带宽不应该改变，因为信息是发送的，不管你把它放在哪里

---

因此，除非css非常静态，否则将其放入页面花费的时间更少。

我总是将两者混合使用

• 站点范围的样式位于单独的文件（&）中
• 任何特定于页面的样式都放在
  中（我已经设置了我的页面模板，以便随时轻松地在
  中插入CSS）

---

将其分开。HTML代表centent，CSS代表样式，JavaScript代表逻辑。

谷歌和雅虎都采用了一种方法，这种方法得益于内联CSS。为了快速加载，第一次访问者将CSS（甚至JavaScript）嵌入到HTML中，然后在后台下载单独的CSS和JS文件，以备下次使用

以下是：

[…]最好的解决方案通常是 将JavaScript和CSS部署为 外部文件。唯一的例外 我已经看到了内联更可取的地方 是与主页，如雅虎s 头版（）和 我的雅虎！(). 家 页面很少（可能只有一个） 每个会话的页面视图可能会发现 内联JavaScript和CSS会导致 更快的最终用户响应时间

---

如果您正在动态生成HTML（例如，从模板生成），嵌入CSS还允许您使用生成HTML时使用的相同上下文（数据、程序状态）动态生成CSS，而不必在后续请求中再次设置相同的上下文来生成CSS

例如，考虑一个使用几百个图像中的一个为背景的页面，这取决于计算昂贵的一些状态。你可以

在一个单独的静态CSS文件中列出规则中的数百个图像，然后生成相应的