Which is a better option: to store CSS on a separate file or on the same page?
哪个更好的选择:将CSS存储在单独的文件中还是存储在同一页面上?
Let's forget the fact that changing the CSS on a file makes it to apply all HTML pages directly. I am using dynamic languages to generate the whole output - so that does not matter.
让我们忘记更改文件上的CSS使其直接应用所有HTML页面的事实。我使用动态语言来生成整个输出 - 所以这无关紧要。
A few things I can think of:
我能想到的一些事情:
- CSS on a separate file generates less bandwidth load.
- CSS on a separate file needs another HTTP request.
单独文件上的CSS产生的带宽负载较少。
单独文件上的CSS需要另一个HTTP请求。
On the other hand, if I compress the data transmission with Zlib, the CSS on the same page should not matter in terms of bandwidth, correct? So, I get one less HTTP request?
另一方面,如果我使用Zlib压缩数据传输,同一页面上的CSS在带宽方面无关紧要,对吗?那么,我得到一个更少的HTTP请求?
7 个解决方案
#1
1
If you're generating HTML dynamically (say, from templates), embedding CSS allows you the opportunity to also generate the CSS dynamically using the same context (data, program state) as you have when you're producing the HTML, rather than having to set that same context up again on a subsequent request to generate the CSS.
如果您正在动态生成HTML(例如,从模板中生成),嵌入CSS允许您有机会使用与生成HTML时相同的上下文(数据,程序状态)动态生成CSS,而不是在后续生成CSS的请求上再次设置相同的上下文。
For example, consider a page that uses one of several hundred images for a background, depending on some state that's expensive to compute. You could
例如,考虑使用几百个图像中的一个作为背景的页面,具体取决于计算成本高昂的某些状态。你可以
- List all of the several hundred images in rules in a seperate, static CSS file, then generate a corresponding class name in your dynamic HTML, or
- Generate the HTML with a single class name, then on a subsequent request generate CSS with a rule for that name that uses the desired image, or
- Do (2), but generate the CSS embedded in the HTML in a single request
在单独的静态CSS文件中列出规则中的所有数百个图像,然后在动态HTML中生成相应的类名,或者
使用单个类名生成HTML,然后在后续请求中生成CSS,其中包含使用所需图像的该名称的规则,或者
做(2),但在单个请求中生成嵌入在HTML中的CSS
(1) avoids redoing the expensive state computation, but takes a larger hit on traffic (more packets to move a much larger CSS file). (2) Does the state calculation twice, but serves up a smaller CSS file. Only (3) does the state calculation once and serves the result in a single HTTP request.
(1)避免重做昂贵的状态计算,但是对流量的影响更大(更多的数据包移动更大的CSS文件)。 (2)状态计算两次,但提供较小的CSS文件。只有(3)进行一次状态计算,并在单个HTTP请求中提供结果。
#2
31
The main benefit of an external CSS file is that:
外部CSS文件的主要好处是:
- It can be used on multiple pages; and
- It can be cached so it doesn't need to be loaded on every page.
它可以在多个页面上使用;和
它可以被缓存,因此不需要在每个页面上加载它。
So, if there is potential for reuse of the dynamically generated CSS between pages or on multiple views of the same page then an external file could add value.
因此,如果有可能在页面之间或同一页面的多个视图上重用动态生成的CSS,那么外部文件可以增加价值。
There are several common patterns for dynamically generated CSS.
动态生成CSS有几种常见模式。
1. Generating a subset for a page
1.为页面生成子集
I've seen this occasionally. A developer decides to limit the amount of CSS per page by only sending what's necessary. I don't imagine this is the case for you but I'm mentioning it for completeness. This is a misguided effort at optimization. It's cheaper to send the whole lot and just cache it effectively.
我偶尔也见过这个。开发人员决定仅通过发送必要的内容来限制每页的CSS数量。我不认为这是你的情况,但我提到它是完整的。这是一种误导性的优化努力。发送整个产品并且只是有效地缓存它会更便宜。
2. User-selected theme
2.用户选择的主题
If the user selects a particular look for your site, that's what I'm talking about. This implies they might select a whole package of CSS and there might be a limited set to choose from. Usually this will be done by having one or more base CSS files and then oen or more theme CSS files. The best solution here is to send the right combination of external CSS files by dynamically generating the page header with the right <link> elements and then caching those files effectively.
如果用户选择了您网站的特定外观,那就是我所说的。这意味着他们可能会选择一整套CSS,并且可能会有一组有限的选择。通常这将通过具有一个或多个基本CSS文件然后使用或更多主题CSS文件来完成。这里最好的解决方案是通过动态生成带有正确 元素的页眉,然后有效地缓存这些文件来发送外部CSS文件的正确组合。
3. User-rolled theme
3.用户滚动的主题
This goes beyond (2) to where the user can select, say, colours, fonts and sizes to the point where you can't package those choices into a single theme bundle but you have to generate a set of CSS for that user. In this case you will probably still have some common CSS. Send that as an external CSS files (again, caching them effectively).
这超出了(2)用户可以选择的颜色,字体和大小,以至于您无法将这些选项打包到单个主题包中,但您必须为该用户生成一组CSS。在这种情况下,您可能仍会有一些常见的CSS。将其作为外部CSS文件发送(再次,有效地缓存它们)。
The dynamic content may be best on the page or you may still be able to make use of external files because there is no reason a <link> can't point to a script instead of a static file. For example:
动态内容可能在页面上最佳,或者您仍然可以使用外部文件,因为没有理由 无法指向脚本而不是静态文件。例如:
<link rel="stylesheet" href="/css/custom.php?user=bob" type="text/css">
where the query string is generated dynamically by your header from who is logged in. That script will look up the user preferences and generate a dynamic CSS file. This can be cached effectively whereas putting it directly in the HTML file can't be (unless the whole HTML file can be cached effectively).
查询字符串是由登录者的标头动态生成的。该脚本将查找用户首选项并生成动态CSS文件。这可以有效地缓存,而不能直接将其放在HTML文件中(除非整个HTML文件可以有效地缓存)。
4. Rules-based CSS generation
4.基于规则的CSS生成
I've written a reporting system before that took a lot of rules specified by either the user or a report writer and a custom report and generated a complete HTML page (based on the tables and/or charts they requested in the custom report definition) and styled them according to the rules. This truly was dynamic CSS. Thing is, there is potential for caching here too. The HTML page generates a dynamic link like this:
我之前编写了一个报告系统,它采用了用户或报告编写者和自定义报告指定的大量规则,并生成了一个完整的HTML页面(基于他们在自定义报告定义中请求的表和/或图表)并按照规则设计。这真的是动态的CSS。事实上,这里也有可能进行缓存。 HTML页面生成如下动态链接:
<link rel="stylesheet" href="/css/report.annual-sales.0001.css" type="text/css">
where 'annual-sales' is the report ID and 0001 is like a version. When the rules change you create a new version and each version for each report can be cached effectively.
其中'年销售额'是报告ID,0001就像版本。当规则更改时,您可以创建新版本,并且可以有效地缓存每个报告的每个版本。
Conclusion
So I can't say definitively whether external CSS files are appropriate or not to you but having seen and developed for each of the scenarios above I have a hard time believing that you can't get some form of caching out of your CSS at which point it should be external.
所以我不能肯定地说外部CSS文件是否适合你,但已经看到并开发了上述每个场景我很难相信你不能从你的CSS中获得某种形式的缓存它应该是外在的。
I've written about the issue of effective CSS in Supercharging CSS in PHP but the principles and techniques apply in any language, not just PHP.
我已经写过关于PHP中增强CSS的有效CSS问题,但其原理和技术适用于任何语言,而不仅仅是PHP。
You may also want to refer to the related question Multiple javascript/css files: best practices?
您可能还想参考相关问题多个javascript / css文件:最佳做法?
#3
14
There is a method that both Google and Yahoo apply which benefit's from inline CSS. For the very first time visitors for the sake of fast loading, they embed CSS (and even JavaScript) in the HTML, and then in the background download the separate CSS and JS files for the next time.
谷歌和雅虎都有一种方法可以应用内联CSS带来的好处。为了快速加载,第一次访问者,他们在HTML中嵌入CSS(甚至JavaScript),然后在后台下载单独的CSS和JS文件以供下次使用。
Steve Souders (Yahoo!) writes the following:
Steve Souders(雅虎)写道:
[...] the best solution generally is to deploy the JavaScript and CSS as external files. The only exception I’ve seen where inlining is preferable is with home pages, such as Yahoo!'s front page (http://www.yahoo.com) and My Yahoo! (http://my.yahoo.com). Home pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times.
[...]最佳解决方案通常是将JavaScript和CSS部署为外部文件。我见过的唯一例外是内联,例如Yahoo!的首页(http://www.yahoo.com)和My Yahoo! (http://my.yahoo.com)。每个会话具有很少(可能只有一个)页面视图的主页可能会发现内联JavaScript和CSS会导致更快的最终用户响应时间。
#4
1
Browsers can cache the CSS files (unless it changes a lot). The bandwidth should not change, because the information is sent, no matter where you put it.
浏览器可以缓存CSS文件(除非它发生很大变化)。带宽不应该改变,因为无论你把它放在哪里,都会发送信息。
So unless the css quite static, putting it in the page costs less time to get.
因此,除非css非常静态,否则将其放入页面所需的时间更少。
#5
#6
1
Yes and no. Use a .css file for most rules; your site should have a consistent look anyway. For rare, special case, or dynamically generated rules you can use inline 'style=""'. Anything that sticks should move into the .css, if only to make transcluding, mash-ups, etc. easier.
是的,不是。对大多数规则使用.css文件;无论如何,您的网站应该具有一致的外观。对于罕见,特殊情况或动态生成的规则,您可以使用内联'style =“”'。任何坚持的东西都应该进入.css,如果只是为了使转录,混搭等更容易。
#7
0
Keep it separate. HTML for centent, CSS for style, JavaScript for logic.
保持分开。用于centent的HTML,用于样式的CSS,用于逻辑的JavaScript。
#1
1
If you're generating HTML dynamically (say, from templates), embedding CSS allows you the opportunity to also generate the CSS dynamically using the same context (data, program state) as you have when you're producing the HTML, rather than having to set that same context up again on a subsequent request to generate the CSS.
如果您正在动态生成HTML(例如,从模板中生成),嵌入CSS允许您有机会使用与生成HTML时相同的上下文(数据,程序状态)动态生成CSS,而不是在后续生成CSS的请求上再次设置相同的上下文。
For example, consider a page that uses one of several hundred images for a background, depending on some state that's expensive to compute. You could
例如,考虑使用几百个图像中的一个作为背景的页面,具体取决于计算成本高昂的某些状态。你可以
- List all of the several hundred images in rules in a seperate, static CSS file, then generate a corresponding class name in your dynamic HTML, or
- Generate the HTML with a single class name, then on a subsequent request generate CSS with a rule for that name that uses the desired image, or
- Do (2), but generate the CSS embedded in the HTML in a single request
在单独的静态CSS文件中列出规则中的所有数百个图像,然后在动态HTML中生成相应的类名,或者
使用单个类名生成HTML,然后在后续请求中生成CSS,其中包含使用所需图像的该名称的规则,或者
做(2),但在单个请求中生成嵌入在HTML中的CSS
(1) avoids redoing the expensive state computation, but takes a larger hit on traffic (more packets to move a much larger CSS file). (2) Does the state calculation twice, but serves up a smaller CSS file. Only (3) does the state calculation once and serves the result in a single HTTP request.
(1)避免重做昂贵的状态计算,但是对流量的影响更大(更多的数据包移动更大的CSS文件)。 (2)状态计算两次,但提供较小的CSS文件。只有(3)进行一次状态计算,并在单个HTTP请求中提供结果。
#2
31
The main benefit of an external CSS file is that:
外部CSS文件的主要好处是:
- It can be used on multiple pages; and
- It can be cached so it doesn't need to be loaded on every page.
它可以在多个页面上使用;和
它可以被缓存,因此不需要在每个页面上加载它。
So, if there is potential for reuse of the dynamically generated CSS between pages or on multiple views of the same page then an external file could add value.
因此,如果有可能在页面之间或同一页面的多个视图上重用动态生成的CSS,那么外部文件可以增加价值。
There are several common patterns for dynamically generated CSS.
动态生成CSS有几种常见模式。
1. Generating a subset for a page
1.为页面生成子集
I've seen this occasionally. A developer decides to limit the amount of CSS per page by only sending what's necessary. I don't imagine this is the case for you but I'm mentioning it for completeness. This is a misguided effort at optimization. It's cheaper to send the whole lot and just cache it effectively.
我偶尔也见过这个。开发人员决定仅通过发送必要的内容来限制每页的CSS数量。我不认为这是你的情况,但我提到它是完整的。这是一种误导性的优化努力。发送整个产品并且只是有效地缓存它会更便宜。
2. User-selected theme
2.用户选择的主题
If the user selects a particular look for your site, that's what I'm talking about. This implies they might select a whole package of CSS and there might be a limited set to choose from. Usually this will be done by having one or more base CSS files and then oen or more theme CSS files. The best solution here is to send the right combination of external CSS files by dynamically generating the page header with the right <link> elements and then caching those files effectively.
如果用户选择了您网站的特定外观,那就是我所说的。这意味着他们可能会选择一整套CSS,并且可能会有一组有限的选择。通常这将通过具有一个或多个基本CSS文件然后使用或更多主题CSS文件来完成。这里最好的解决方案是通过动态生成带有正确 元素的页眉,然后有效地缓存这些文件来发送外部CSS文件的正确组合。
3. User-rolled theme
3.用户滚动的主题
This goes beyond (2) to where the user can select, say, colours, fonts and sizes to the point where you can't package those choices into a single theme bundle but you have to generate a set of CSS for that user. In this case you will probably still have some common CSS. Send that as an external CSS files (again, caching them effectively).
这超出了(2)用户可以选择的颜色,字体和大小,以至于您无法将这些选项打包到单个主题包中,但您必须为该用户生成一组CSS。在这种情况下,您可能仍会有一些常见的CSS。将其作为外部CSS文件发送(再次,有效地缓存它们)。
The dynamic content may be best on the page or you may still be able to make use of external files because there is no reason a <link> can't point to a script instead of a static file. For example:
动态内容可能在页面上最佳,或者您仍然可以使用外部文件,因为没有理由 无法指向脚本而不是静态文件。例如:
<link rel="stylesheet" href="/css/custom.php?user=bob" type="text/css">
where the query string is generated dynamically by your header from who is logged in. That script will look up the user preferences and generate a dynamic CSS file. This can be cached effectively whereas putting it directly in the HTML file can't be (unless the whole HTML file can be cached effectively).
查询字符串是由登录者的标头动态生成的。该脚本将查找用户首选项并生成动态CSS文件。这可以有效地缓存,而不能直接将其放在HTML文件中(除非整个HTML文件可以有效地缓存)。
4. Rules-based CSS generation
4.基于规则的CSS生成
I've written a reporting system before that took a lot of rules specified by either the user or a report writer and a custom report and generated a complete HTML page (based on the tables and/or charts they requested in the custom report definition) and styled them according to the rules. This truly was dynamic CSS. Thing is, there is potential for caching here too. The HTML page generates a dynamic link like this:
我之前编写了一个报告系统,它采用了用户或报告编写者和自定义报告指定的大量规则,并生成了一个完整的HTML页面(基于他们在自定义报告定义中请求的表和/或图表)并按照规则设计。这真的是动态的CSS。事实上,这里也有可能进行缓存。 HTML页面生成如下动态链接:
<link rel="stylesheet" href="/css/report.annual-sales.0001.css" type="text/css">
where 'annual-sales' is the report ID and 0001 is like a version. When the rules change you create a new version and each version for each report can be cached effectively.
其中'年销售额'是报告ID,0001就像版本。当规则更改时,您可以创建新版本,并且可以有效地缓存每个报告的每个版本。
Conclusion
So I can't say definitively whether external CSS files are appropriate or not to you but having seen and developed for each of the scenarios above I have a hard time believing that you can't get some form of caching out of your CSS at which point it should be external.
所以我不能肯定地说外部CSS文件是否适合你,但已经看到并开发了上述每个场景我很难相信你不能从你的CSS中获得某种形式的缓存它应该是外在的。
I've written about the issue of effective CSS in Supercharging CSS in PHP but the principles and techniques apply in any language, not just PHP.
我已经写过关于PHP中增强CSS的有效CSS问题,但其原理和技术适用于任何语言,而不仅仅是PHP。
You may also want to refer to the related question Multiple javascript/css files: best practices?
您可能还想参考相关问题多个javascript / css文件:最佳做法?
#3
14
There is a method that both Google and Yahoo apply which benefit's from inline CSS. For the very first time visitors for the sake of fast loading, they embed CSS (and even JavaScript) in the HTML, and then in the background download the separate CSS and JS files for the next time.
谷歌和雅虎都有一种方法可以应用内联CSS带来的好处。为了快速加载,第一次访问者,他们在HTML中嵌入CSS(甚至JavaScript),然后在后台下载单独的CSS和JS文件以供下次使用。
Steve Souders (Yahoo!) writes the following:
Steve Souders(雅虎)写道:
[...] the best solution generally is to deploy the JavaScript and CSS as external files. The only exception I’ve seen where inlining is preferable is with home pages, such as Yahoo!'s front page (http://www.yahoo.com) and My Yahoo! (http://my.yahoo.com). Home pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times.
[...]最佳解决方案通常是将JavaScript和CSS部署为外部文件。我见过的唯一例外是内联,例如Yahoo!的首页(http://www.yahoo.com)和My Yahoo! (http://my.yahoo.com)。每个会话具有很少(可能只有一个)页面视图的主页可能会发现内联JavaScript和CSS会导致更快的最终用户响应时间。
#4
1
Browsers can cache the CSS files (unless it changes a lot). The bandwidth should not change, because the information is sent, no matter where you put it.
浏览器可以缓存CSS文件(除非它发生很大变化)。带宽不应该改变,因为无论你把它放在哪里,都会发送信息。
So unless the css quite static, putting it in the page costs less time to get.
因此,除非css非常静态,否则将其放入页面所需的时间更少。
#5
1
I always use mix of both.
我总是使用两者的混合。
#6
1
Yes and no. Use a .css file for most rules; your site should have a consistent look anyway. For rare, special case, or dynamically generated rules you can use inline 'style=""'. Anything that sticks should move into the .css, if only to make transcluding, mash-ups, etc. easier.
是的,不是。对大多数规则使用.css文件;无论如何,您的网站应该具有一致的外观。对于罕见,特殊情况或动态生成的规则,您可以使用内联'style =“”'。任何坚持的东西都应该进入.css,如果只是为了使转录,混搭等更容易。
#7
0
Keep it separate. HTML for centent, CSS for style, JavaScript for logic.
保持分开。用于centent的HTML,用于样式的CSS,用于逻辑的JavaScript。