哪个更好的选择:将CSS存储在单独的文件中还是存储在同一页面上？
让我们忘记更改文件上的CSS使其直接应用所有HTML页面的事实.我使用动态语言来生成整个输出 - 所以这没关系.
我能想到的一些事情:
另一方面,如果我使用Zlib压缩数据传输,同一页面上的CSS在带宽方面无关紧要,对吗？那么,我得到一个更少的HTTP请求？
cle*_*tus 30
外部CSS文件的主要好处是:
因此,如果有可能在页面之间或同一页面的多个视图上重用动态生成的CSS,那么外部文件可以增加价值.
动态生成的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">
查询字符串由登录者的标头动态生成.该脚本将查找用户首选项并生成动态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在其中它应该是外在的.
我已经写过关于PHP中增强CSS的有效CSS问题,但其原理和技术适用于任何语言,而不仅仅是PHP.
您可能还想参考相关问题多个javascript/css文件:最佳做法？
Tör*_*bor 14
谷歌和雅虎都有一种方法可以应用内联CSS带来的好处.为了快速加载,第一次访问者,他们在HTML中嵌入CSS(甚至JavaScript),然后在后台下载单独的CSS和JS文件以供下次使用.
[...]最佳解决方案通常是将JavaScript和CSS部署为外部文件.我见过的唯一例外情况是内联,例如Yahoo!的首页(http://www.yahoo.com)和My Yahoo! (http://my.yahoo.com).每个会话具有很少(可能只有一个)页面视图的主页可能会发现内联JavaScript和CSS会导致更快的最终用户响应时间.
如果您要动态生成 HTML（例如，从模板），则嵌入 CSS 使您有机会使用与生成 HTML 时相同的上下文（数据、程序状态）动态生成 CSS，而不是使用在后续请求中再次设置相同的上下文以生成 CSS。
例如，考虑一个页面，该页面使用数百张图像中的一张作为背景，具体取决于计算成本高昂的某些状态。你可以
(1) 避免重做昂贵的状态计算，但对流量造成更大的影响（更多的数据包移动更大的 CSS 文件）。(2) 进行两次状态计算，但提供较小的 CSS 文件。只有 (3) 进行一次状态计算并在单个 HTTP 请求中提供结果。