blocks|key|3684931|text|在性能方面，使用单个文件会更好，因为它会导致对服务器的一个连接和请求(从时间上讲，这些操作往往很耗时)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3684932|这就是minifying框架存在的原因，它将每个页面的所有CSS+(和JavaScript)文件合并在一起，并在一个请求中提供它们。|offset|length|3684933|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Minification_%2528programming%2529^0|0|3|9|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Performance wise, you are better off with a single file, as it results in one connection and request to the server (these tend to be expensive operations, time wise).

This is why <a href="http://en.wikipedia.org/wiki/Minification_%28programming%29" rel="noreferrer">minifying</a> frameworks exist, that merge together all the CSS (and JavaScript) files for each page and serve them in one request.

blocks|key|2277875|text|我的策略很简单。我在CSS文件和JS文件中将生产与开发分开。在开发中，我可以有多达20个JS文件和10个CSS文件，组织是超级圆滑和容易，我总是知道一切都在哪里。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2277876|在生产环境中，所有文件都被压缩为1js和1css文件，总是在开发过程中进行更改，然后“登台”到生产环境中，因此我获得了应用程序的可维护性和在生产环境中的性能。|2277877|我使用雅虎迷你来缩小我的文件，但你可以使用任何方便你。|2277878|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

My strategy on this is simple.
I separate production from development, both in CSS files and in JS files.
in development, I can have up to 20 JS files and 10 CSS files, organization is super slick and easy, I always know where everything is.
In production, all files are minified into 1js and 1css file, changes are always made in development and then &quot;staged&quot; to production so I gain the maintainability of the application and the performance in production.
I use Yahoo minifier to minify my files but you can use whatever is convenient for you.

blocks|key|2277809|text|拥有一个CSS文件不仅有助于处理HTTP请求，它还可以提供更好的压缩(压缩一个大文件应该比压缩多个小文件得到更好的结果)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2277810|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Having one CSS file doesn't just help with HTTP requests, it will also give you better compression (compressing one big file should give you better results than compressing multiple smaller files).

blocks|key|1400451|text|在这里，不同的HTTP请求几乎不是瓶颈，最终是文件大小。最好尽可能拆分的原因是，如果你想改变站点感觉的某个东西，比如说，所有标题的字体，你只想改变一个文件/设置，并希望该文件尽可能小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1400452|对于较大且包含的CSS，我会为所有不同的内容制作不同的CSS文档，如布局、类的处理等，另一个优点是，如果您有多个页面，需要与主页的外观稍有不同，它们只需链接到另一个CSS文件，而不是链接到一个完全不同的CSS文件，它们共享大多数。|1400453|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Different HTTP requests are hardly the bottleneck here, file size ultimately is. The reason it's best to split things up as much as possible is because if you want to change a certain thing of your site's feel, let's say, the font of all headers, you want to change one file / setting only for that, and want that file to be as small as possible.

For large and encompasing CSS, I would make different CSS documents for all different things like the layout, the treatment of classes, and so on, another advantage is that if you've multiple pages that need a slightly different look from the main page, they only have to link to one other CSS file, not to a completely different one, the majority they an share.

blocks|key|3685226|text|不要使用太多不同的css文件，或者至少尝试将它们放在其他域中，以加快浏览器的下载速度。我还建议您使用minification+tool。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3685227|entityMap|0|LINK|mutability|MUTABLE|url|http://www.google.be/search?sourceid=chrome&ie=UTF-8&q=css%2Bminifier^0|1E|H|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Use not too much different css files or at least try to put them on other domains to speed up downloading them by the browser. I also suggest you use a <a href="http://www.google.be/search?sourceid=chrome&amp;ie=UTF-8&amp;q=css+minifier" rel="nofollow noreferrer">minification tool</a>.

blocks|key|657437|text|如果性能确实对您很重要，请执行|type|unstyled|depth|inlineStyleRanges|entityRanges|data|657438|然后|657439|如果你的网站很小，但是访问量很大，那就用一个css文件吧|657440|如果站点是小型个人或企业站点，则流量较少，则转到多个css|657441|657442|如果CSS文件的可维护性对您很重要，则为|657443|657444|如果你的网站很小，不同的页面很少，那么就去找一个css文件。|657445|如果站点很大，那么使用多个css+http://www.killersites.com/blog/2008/how-to-organize-css/|offset|length|657446|657447|对CSS文件的HTTP请求不会对小站点的性能造成太大的影响。|657448|entityMap|0|LINK|mutability|MUTABLE|url|http://www.killersites.com/blog/2008/how-to-organize-css/^0|0|0|0|0|0|0|0|0|H|1L|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|K|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|19|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1A|8|@]|9|@$P|1B|Q|1C|1|1D]]|A|$]]|$1|R|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1F|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

If performance does matters to you

Then

If your site is small but gets huge traffic then go for one css file 

if site is small personal or business sites then but with less traffic then go to multiple css

<hr>

If CSS files maintainability does matters to you

Then

If your site is small with less different pages then go for one css file. 

if site is big then go for multiple css <a href="http://www.killersites.com/blog/2008/how-to-organize-css/" rel="nofollow noreferrer">http://www.killersites.com/blog/2008/how-to-organize-css/</a>

<hr>

HTTP request of CSS files will not make big difference in performance of small site.

blocks|key|655621|text|嗯，和Yahoo的一样:使用一个来减少HTTP请求的数量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|655622|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Well, the same as Yahoo!'s: Use one to reduce the number of HTTP requests.

blocks|key|655721|text|对于页面的最快下载和渲染，Yahoo的性能规则是正确的。你想要尽可能少的http请求。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|655722|然而，在许多网站上，只有一个大的CSS文件是不方便的。最好的办法是将CSS组织成任意数量的文件，然后使用服务器端脚本来连接这些文件。GZIP对这个文件也有很大的帮助。|655723|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

For the quickest download and rendering of a page, the Yahoo performance rules are correct. You want as few http requests as possible. 

However, on many sites, it's simply not convenient to have a single large CSS files. Your best bet is to organize your CSS into as many files as you'd like, and then use a server side script to concatenate the files. GZIP'ing that file goes a long way, too.

blocks|key|3685199|text|您应该使用多个css文件，而不是使用一个大文件。它帮助你在维护站点的同时，在不同的css中使用不同的定义(classe或id名称)，否则它将采用后面声明的定义。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3685200|但出于性能考虑，您可以使用一个大文件，因为一个大的CSS文件会导致较少的HTTP请求，这可以提高性能。|3685201|几个较小的文件更容易组织，这将使开发和维护成本更低，维护更容易。|3685202|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

you should use more than one css file rather using one big file. It helps you while maintaining your site also use different definitions (classe or id names) in different css otherwise it will take the one which declared later. 

But for performance reasone you can use one large file because,
One large CSS file leads to fewer HTTP requests, which can improve performance.

Several smaller files leads to easier organization which will make development and maintenance cheaper and easier.

blocks|key|2277703|text|多个文件对组织是有好处的，但对服务器的一个请求绝对是最好的。如果你看了Google的性能视频，他们会建议尽可能少的HTTP请求。每个HTTP请求在握手过程中都有开销，如果您希望站点速度更快，则不希望产生这些开销。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2277704|看看这个伟大的脚本，它将把你的多个CSS/JS文件转换成一个文件：|2277705|http://code.google.com/p/minify/|offset|length|2277706|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|W|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

Multiple files are good for organization, but one request to the server is definitely best. If you watch the performance videos from Google they suggest the least amount of HTTP requests possible. Each HTTP request has overhead in the handshake that you do not want to incur if you wish your site to be fast.

Check out this great script which will take your multiple CSS/JS files and turn them into one file:

<a href="http://code.google.com/p/minify/" rel="nofollow noreferrer">http://code.google.com/p/minify/</a>

blocks|key|2277902|text|权衡一下。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2277903|一个CSS文件的优点|2277904|2277905|缩短了延迟。每个可下载的组件都有少量的延迟。更少的文件和更少的延迟|unordered-list-item|2277906|单点压缩|2277907|2277908|多项功能的优势|2277909|2277910|更改一个文件不需要重新下载所有的css。其他的css可以从cache|2277911|Structure|2277912|Only下载你所需要的。例如，如果页面上没有任何表单，则无需下载forms.css|2277913|2277914|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|G|7|10|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|N|3|O|5|G|7|14|8|@]|9|@]|A|$]]|$1|P|3|Q|5|G|7|15|8|@]|9|@]|A|$]]|$1|R|3|S|5|G|7|16|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|V|$]]

Weigh it up.

The advantages of one CSS file

<ul>
<li>Reduced latency. Each downloadable component comes with a small amount of latency. Less files => less latency</li>
<li>Single point of compression</li>
</ul>

Advantages of multiple

<ul>
<li>Change one file won't require all css to be re-downloaded. The other css can be served from the cache</li>
<li>Structure</li>
<li>Only download what you need. If you don't have any forms on your page for example you don't need to download forms.css</li>
</ul>

I'm wondering if it's better to make one or several files for CSS files ?

I always see websites with a plenty of css files, but it <a href="http://developer.yahoo.com/performance/rules.html#num_http" rel="nofollow noreferrer">seems better</a> to use only one large file.

What's your advice ?

For performance, use one or several css files?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我想知道是为CSS文件制作一个文件还是几个文件更好？我总是看到有很多css文件的网站，但它只使用一个大文件的。你的建议是什么？

问为了提高性能，使用一个或多个css文件？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为了提高性能，使用一个或多个css文件？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为了提高性能，使用一个或多个css文件？
EN