blocks|key|2974333|text|我更喜欢多个CSS文件。通过这种方式，可以更容易地根据自己的意愿来交换“皮肤”。一个单块文件的问题是，它可能会失去控制，难以管理。如果你想要蓝色背景，但不想改变按钮呢？只需改变你的背景文件。等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2974334|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|$]]

I prefer multiple CSS files. That way it is easier to swap "skins" in and out as you desire. The problem with one monolithic file is that it can get out of control and hard to manage. What if you want blue backgrounds but don't want the buttons to change? Just alter your backgrounds file. Etc.

blocks|key|1256318|text|只有一个CSS文件对页面的加载时间更好，因为它意味着更少的HTTP请求。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1256319|拥有几个小CSS文件意味着开发更容易(至少，我认为是这样的:应用程序的每个模块拥有一个CSS文件会使事情变得更容易)。|1256320|所以，这两种情况都有很好的理由.|1256321|一种可以让您充分利用这两种想法的解决方案是：|1256322|使用几个小的CSS文件进行开发|unordered-list-item|1256323|即更容易发展|1256324|1256325|​|1256326|若要为应用程序创建一个构建过程，则将这些文件“组合”到一个中。|1256327|这个构建过程也会缩小那个大文件，顺便说一句。|1256328|这显然意味着你的应用程序必须有一些配置，允许它从“多文件模式”到“单文件模式”。|1256329|1256330|1256331|在生产中，只使用大文件|1256332|即更快地加载页面|1256333|1256334|1256335|也有一些软件可以在运行时，而不是在构建时进行CSS文件的合并；但是在运行时这样做意味着消耗更多的CPU+(显然需要一些缓存机制，以避免频繁地重新生成大文件)。|1256336|entityMap^0|0|0|0|0|1|1|0|0|1|1|1|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1A|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1B|8|@]|9|@]|A|$]]|$1|K|3|L|5|J|7|1C|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1E|8|@]|9|@]|A|$]]|$1|P|3|Q|5|J|7|1F|8|@]|9|@]|A|$]]|$1|R|3|S|5|J|7|1G|8|@]|9|@]|A|$]]|$1|T|3|U|5|J|7|1H|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|W|3|O|5|6|7|1J|8|@]|9|@]|A|$]]|$1|X|3|Y|5|J|7|1K|8|@]|9|@]|A|$]]|$1|Z|3|10|5|J|7|1L|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|12|3|O|5|6|7|1N|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|1O|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|16|$]]

Having only one CSS file is better for the loading-time of your pages, as it means less HTTP requests.

Having several little CSS files means development is easier (at least, I think so : having one CSS file per module of your application makes things easier).

So, there are good reasons in both cases...

 
A solution that would allow you to get the best of both ideas would be :

<ul>
<li>To develop using several small CSS files

<ul>
<li>i.e. easier to develop</li>
</ul></li>
<li>To have a build process for your application, that "combines" those files into one

<ul>
<li>That build process could also minify that big file, btw</li>
<li>It obviously means that your application must have some configuration stuff that allows it to swith from "multi-files mode" to "mono-file mode".</li>
</ul></li>
<li>And to use, in production, only the big file

<ul>
<li>i.e. faster loading pages</li>
</ul></li>
</ul>

There are also some software that do that combining of CSS files at run-time, and not at build-time ; but doing it at run-time means eating a bit more CPU (and obvisouly requires some caching mecanism, to not re-generate the big file too often)

blocks|key|2974417|text|在开发过程中，我更喜欢多个CSS文件。这样的话，管理和调试就容易多了。但是，我建议您在部署时使用CSS小型化工具，比如YUI压缩机，它将把您的CSS文件合并成一个完整的文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2974418|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/yui/compressor/^0|1N|6|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]]]]

I prefer multiple CSS files during development. Management and debugging is much easier that way. However, I suggest that come deployment time you instead use a CSS minify tool like <a href="http://developer.yahoo.com/yui/compressor/" rel="noreferrer">YUI Compressor</a> which will merge your CSS files into one monolithic file.

blocks|key|2974449|text|单个CSS文件的优点是传输效率。每个HTTP请求都意味着每个请求文件的HTTP头响应，这就占用了带宽。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2974450|我将我的CSS作为一个PHP文件，在HTTP头中使用"text/css“mime类型。通过这种方式，我可以在服务器端拥有多个CSS文件，并在用户请求时使用PHP包含将它们推入单个文件。每个现代浏览器都接收带有CSS代码的.php文件，并将其作为.css文件处理。|2974451|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|$]]

The advantage to a single CSS file is transfer efficiency. Each HTTP request means a HTTP header response for each file requested, and that takes bandwidth.

I serve my CSS as a PHP file with the "text/css" mime type in the HTTP header. This way I can have multiple CSS files on the server side and use PHP includes to push them into a single file when requested by the user. Every modern browser receives the .php file with the CSS code and processes it as a .css file.

blocks|key|1451192|text|您可以使用一个css文件来提高性能，然后注释掉如下部分：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1451193|/********+Header+************/
//some+css+here

/*******+End+Header+*********/


/********+Footer+************/
//some+css+here

/*******+End+Footer+*********/|code-block|syntax|javascript|1451194|等|1451195|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can just use one css file for performance and then comment out sections like this:

<pre><code>/******** Header ************/
//some css here

/******* End Header *********/


/******** Footer ************/
//some css here

/******* End Footer *********/
</code></pre>

etc

blocks|key|1254825|text|你想要这两个世界。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1254826|您需要多个CSS文件，因为您的理智是一个可怕的东西浪费。|1254827|同时，最好只有一个大文件。|1254828|解决方案是有某种机制将多个文件组合成一个文件。|1254829|一个例子是这样的|1254830|<link+rel="stylesheet"+type="text/css"+href="allcss.php?files=positions.css,buttons.css,copy.css"+/>|code-block|syntax|javascript|1254831|然后，allcss.php脚本处理文件的连接和传递。|1254832|理想情况下，脚本将检查所有文件的mod日期，如果其中任何一个文件发生更改，则创建一个新的组合，然后返回该复合，然后检查是否修改了HTTP头，以避免发送冗余的CSS。|1254833|这给了你最好的两个世界。对JS也很有用。|1254834|entityMap^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|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|11|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

You want both worlds.

You want multiple CSS files because your sanity is a terrible thing to waste.

At the same time, it's better to have a single, large file.

The solution is to have some mechanism that combines the multiple files in to a single file.

One example is something like

<pre><code>&lt;link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" /&gt;
</code></pre>

Then, the allcss.php script handles concatenating the files and delivering them.

Ideally, the script would check the mod dates on all the files, creates a new composite if any of them changes, then returns that composite, and then checks against the If-Modified HTTP headers so as to not send redundant CSS.

This gives you the best of both worlds. Works great for JS as well.

blocks|key|1254854|text|单块样式表确实提供了许多好处(在其他答案中有说明)，但是，取决于样式表文档的总体大小，您可能会在IE中遇到问题。IE有一个限制，它将从一个单个文件读取多少选择器。限制为4096个选择器。如果您是单块样式表，则需要将其拆分。这个限制只会使它在IE中显得丑陋。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1254855|这是所有版本的IE。|1254856|见Ross+Bruniges博客和MSDN+AddRule页面。|1254857|entityMap|0|LINK|mutability|MUTABLE|url|https://web.archive.org/web/20160307235531/http://www.thecssdiv.co.uk/2009/08/another-weird-ie6-bug/|1|http://msdn.microsoft.com/en-us/library/aa358796%2528VS.85%2529.aspx^0|1X|4|0|0|1|F|0|H|E|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]|$9|11|A|12|1|13]]|E|$]]|$1|J|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

Monolithic stylesheets do offer a lot of benefits (which are described in the other answers), however depending on the overall size of the stylesheet document you could run into problems in IE. IE has a limitation with how many selectors it will read from a single file. The limit is 4096 selectors. If you're monolithic stylesheet will have more than this you will want to split it. This limitation only rears it's ugly head in IE.

This is for all versions of IE.

See <a href="https://web.archive.org/web/20160307235531/http://www.thecssdiv.co.uk/2009/08/another-weird-ie6-bug/" rel="nofollow noreferrer">Ross Bruniges Blog</a> and <a href="http://msdn.microsoft.com/en-us/library/aa358796%28VS.85%29.aspx" rel="nofollow noreferrer">MSDN AddRule page</a>.

blocks|key|1254862|text|我通常有几个CSS文件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1254863|用于重置和全局样式的“全局”css文件。|unordered-list-item|1254864|“模块”特定的css文件，用于逻辑分组的页面(可能是结帐向导中的每个页面或其他页面)|1254865|“页面”特定的css文件，用于重写页面(或者，将其放在单个页面的一个块中)|1254866|我并不太关心CSS文件的多个页面请求。大多数人都有很好的带宽，我相信还有其他的优化比将所有样式组合成一个单一CSS文件有更大的影响。权衡是在速度和可维护性之间，我总是倾向于可维护性。不过，YUI+comperssor听起来挺酷的，我可能得去看看。|1254867|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|O|8|@]|9|@]|A|$]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Q|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|L|$]]

I typically have a handful of CSS files:

<ul>
<li>a "global" css file for resets and global styles</li>
<li>"module" specific css files for pages that are logically grouped (maybe every page in a checkout wizard or something)</li>
<li>"page" specific css files for overrides on the page (or, put this in a block on the individual page)</li>
</ul>

I am not really too concerned with multiple page requests for CSS files. Most people have decent bandwidth and I'm sure there are other optimizations that would have a far greater impact than combining all styles into one monolitic CSS file. The trade-off is between speed and maintainability, and I always lean towards maintainability. The YUI comperssor sounds pretty cool though, I might have to check that out.

blocks|key|1451316|text|我使用贾米特来处理我的css文件，并使用许多不同的文件来提高可读性。Jammit完成了在生产部署前合并和压缩文件的所有肮脏工作。这样，我已经有许多文件正在开发，但在生产中只有一个文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1451317|entityMap|0|LINK|mutability|MUTABLE|url|http://documentcloud.github.com/jammit/^0|3|3|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]]]]

I'm using <a href="http://documentcloud.github.com/jammit/" rel="nofollow">Jammit</a> to deal with my css files and use many different files for readability. 
Jammit doest all the dirty work of combining and compressing the files before deployment in production. 
This way, I've got many files in development but only one file in production.

blocks|key|1256476|text|也许可以看看罗盘，它是一个开源的CSS创作框架。它基于沙斯，因此它支持诸如变量、嵌套、混合和导入之类的很酷的东西。尤其是，如果您希望保持分离较小的CSS文件，但将它们自动组合为1(避免多次缓慢的HTTP调用)，则导入非常有用。罗盘增加了一大组预定义的混合器，很容易处理跨浏览器的东西。它是用Ruby写的，但可以很容易地与任何系统一起使用.|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1256477|entityMap|0|LINK|mutability|MUTABLE|url|http://compass-style.org/|1|http://sass-lang.com/^0|6|2|0|R|2|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

Maybe take a look at <a href="http://compass-style.org/" rel="nofollow">compass</a>, which is an open source CSS authoring framework. 
It's based on <a href="http://sass-lang.com/" rel="nofollow">Sass</a> so it supports cool things like variables, nesting, mixins and imports. Especially imports are useful if you want to keep seperate smaller CSS files but have them combined into 1 automatically (avoiding multiple slow HTTP calls).
Compass adds to this a big set of pre-defined mixins that are easy for handling cross-browser stuff.
It's written in Ruby but it can easily be used with any system....

blocks|key|2974646|text|以下是最好的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2974647|创建一个包含所有共享代码的通用css文件|ordered-list-item|2974648|将所有特定的页css代码插入到同一页、标记上或使用属性style="“对每个页。|2974649|通过这种方式，您只有一个css与所有共享代码和一个html页面。顺便说一句(我知道这不是正确的话题)，您也可以在base64中对图像进行编码(但也可以使用js和css文件进行编码)。通过这种方式，您可以将更多的http请求减少到1。|2974650|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|M|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|N|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|O|8|@]|9|@]|A|$]]]|J|$]]

here is the best way:

<ol>
<li>create a general css file with all shared code</li>
<li>insert all specific page css code into the same page, on the tag or using the attribute style="" for each page</li>
</ol>

on this way you have only one css with all shared code and an html page.
by the way (and i know that this is not the right topic) you can also encode your images in base64 (but you can also do it with your js and css files). in this way you reduce even more http requests to 1.

blocks|key|1254933|text|我已经创建了一个系统的CSS开发方法。这样我就可以利用一个永不改变的标准。首先，我从960网格系统开始。然后，我为基本布局、边距、填充、字体和大小创建了一行css。然后我根据需要将它们串在一起。这允许我在所有项目中保持一致的布局，并一次又一次地使用相同的css文件。因为它们并不具体。这里有一个例子：--div+class="c12+bg0+m10+p5+white+fl“/div--这意味着容器跨12列，使用bg0的边距为10+p5填充5--文本是白色的，它向左浮动。我可以轻松地通过删除或添加一个新的样式(我称之为"light“样式)来更改它，而不是创建一个具有所有这些属性的类；我只是在编写页面代码时将单个样式组合在一起。这允许我创建任何组合的风格，不限制我的创造力，或使我创造大量的样式是相似的。您的样式表变得更易于管理、最小化，并允许您反复使用它。我发现这种方法非常适合快速设计。我也不再设计私营部门司，而是在浏览器，这也节省了时间。此外，由于我还为我的背景和页面设计属性创建了一个命名系统，所以在创建一个新项目时，我只需更改我的图像文件。(+bg0+=+body背景，根据我的命名系统)，这意味着如果我以前有一个项目的白色背景，简单地将其更改为黑色意味着在下一个项目中，bg0将是一个黑色背景或另一个图像……我还没有发现这种方法有什么问题，而且似乎效果很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1254934|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|$]]

I've created a systematic approach to CSS development. This way I can utilize a standard that never changes. First I started with the 960 grid system. Then I created single lines of css for basic layouts, margins, padding, fonts and sizes. I then string them together as needed. This allows me to keep a consistent layout across all of my projects and utilize the same css files over and over. Because they are not specific. Here's an example: ----div class="c12 bg0 m10 p5 white fl"/div--- This means that the container is 12 columns across, utilizes bg0 has margins of 10px padding of 5 the text is white and it floats left. I could easily change this by removing or adding a new - What I call a "light" style- Instead of creating a single class with all these attributes; I simply combine the single styles as I code the page. This allows me to create any combination of styles and does not limit my creativity or cause me to create a massive number of styles that are similar. Your style sheets become a lot more manageable, minimized and allow you to re-use it over and over. This method I have found to be fantastic for rapid design. I also no longer design first in PSD but in the browser which also saves time. In addition because I have also created a naming system for my backgrounds and page design attributes I simply change out my image file when creating a new project.(bg0 = body background according to my naming system) That means that if I previously had a white background with one project simply changing it to black simply means that on the next project bg0 will be a black background or another image..... I have not found anything wrong with this method yet and it seems to work very well.

blocks|key|1451437|text|像Sass或更少的CSS编译器是一个很好的方法。这样，您就可以为站点提供一个单一的、最小化的CSS文件(它将比普通的单个CSS源文件更小、更快)，同时维护最好的开发环境，将所有东西整齐地拆分成组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1451438|Sass和更少具有变量、嵌套和其他使CSS更易于编写和维护的优点。强烈推荐。我现在个人使用Sass+(SCSS语法)，但以前使用的较少。两者都很好，有着相似的好处。一旦用编译器编写了CSS，就不太可能没有编译器了。|1451439|http://lesscss.org|offset|length|1451440|http://sass-lang.com|1451441|如果您不想与Ruby混为一谈，那么Mac的这个较少的编译器是很棒的：|1451442|http://incident57.com/less/|1451443|或者您可以使用CodeKit+(由相同的人编写)：|1451444|http://incident57.com/codekit/|1451445|WinLess是一个Windows，用于更少的压缩|1451446|http://winless.org/|1451447|entityMap|0|LINK|mutability|MUTABLE|url|http://lesscss.org/|1|http://sass-lang.com/|2|3|4^0|0|0|0|I|0|0|0|K|1|0|0|0|R|2|0|0|0|U|3|0|0|0|J|4|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@$F|1B|G|1C|1|1D]]|A|$]]|$1|H|3|I|5|6|7|1E|8|@]|9|@$F|1F|G|1G|1|1H]]|A|$]]|$1|J|3|K|5|6|7|1I|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1J|8|@]|9|@$F|1K|G|1L|1|1M]]|A|$]]|$1|N|3|O|5|6|7|1N|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1O|8|@]|9|@$F|1P|G|1Q|1|1R]]|A|$]]|$1|R|3|S|5|6|7|1S|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1T|8|@]|9|@$F|1U|G|1V|1|1W]]|A|$]]|$1|V|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]|15|$5|Y|Z|10|A|$11|M]]|16|$5|Y|Z|10|A|$11|Q]]|17|$5|Y|Z|10|A|$11|U]]]]

A CSS compiler like Sass or LESS is a great way to go. That way you'll be able to deliver a single, minimised CSS file for the site (which will be far smaller and faster than a normal single CSS source file), while maintaining the nicest development environment, with everything neatly split into components.

Sass and LESS have the added advantage of variables, nesting and other ways to make CSS easier to write and maintain. Highly, highly recommended. I personally use Sass (SCSS syntax) now, but used LESS previously. Both are great, with similar benefits. Once you've written CSS with a compiler, it's unlikely you'd want to do without one.

<a href="http://lesscss.org">http://lesscss.org</a>

<a href="http://sass-lang.com">http://sass-lang.com</a>

If you don't want to mess around with Ruby, this LESS compiler for Mac is great:

<a href="http://incident57.com/less/">http://incident57.com/less/</a>

Or you could use CodeKit (by the same guys):

<a href="http://incident57.com/codekit/">http://incident57.com/codekit/</a>

WinLess is a Windows GUI for comipiling LESS

<a href="http://winless.org/">http://winless.org/</a>

blocks|key|2974709|text|有一个临界点，在这个临界点上，拥有多个css文件是有益的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2974710|具有1M%2B页面的站点(一般用户可能只看到其中的5个页面)可能会有一个比例很大的样式表，因此试图通过大量的初始下载来节省每个页面加载一个额外请求的开销是错误的。|2974711|将争论扩展到极限--这就像建议应该为整个web维护一个大型样式表一样。显然是荒谬的。|2974712|每个站点的临界点都是不同的，所以没有硬性规定。它将取决于每个页面的唯一css的数量，页面的数量，以及普通用户在使用站点时可能会遇到的页面数。|2974713|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

There is a tipping point at which it's beneficial to have more than one css file.

A site with 1M+ pages, which the average user is likely to only ever see say 5 of, might have a stylesheet of immense proportions, so trying to save the overhead of a single additional request per page load by having a massive initial download is false economy.

Stretch the argument to the extreme limit - it's like suggesting that there should be one large stylesheet maintained for the entire web. Clearly nonsensical.

The tipping point will be different for each site though so there's no hard and fast rule. It will depend upon the quantity of unique css per page, the number of pages, and the number of pages the average user is likely to routinely encounter while using the site.

blocks|key|2974730|text|SASS和更少使这一切成为一个真正的没有意义的点。开发人员可以设置有效的组件文件，并在编译时将它们全部组合起来。在SASS中，您可以在开发过程中关闭压缩模式，以便更容易地阅读，并将其重新打开以供生产。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2974731|http://sass-lang.com+http://lesscss.org|offset|length|2974732|最后，不管您使用什么技术，一个小型化的CSS文件都是您想要的。更少的CSS，更少的HTTP请求，更少的服务器需求。|2974733|entityMap|0|LINK|mutability|MUTABLE|url|http://sass-lang.com/|1|http://lesscss.org/^0|0|0|K|0|L|I|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]|$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

SASS and LESS make this all really a moot point. The developer can set up effective component files and on compile combine them all. In SASS you can toggle off the Compressed Mode while in development for easier reading, and toggle it back on for production. 

<a href="http://sass-lang.com" rel="nofollow">http://sass-lang.com</a>
<a href="http://lesscss.org" rel="nofollow">http://lesscss.org</a>

In the end a single minified CSS file is what you want regardless of the technique you use. Less CSS, Less HTTP requests, Less Demand on the server.

blocks|key|2974760|text|捆绑样式表可以节省页面加载性能，但样式越多，浏览器在页面上呈现动画的速度就越慢。这是由大量未使用的样式造成的，这些样式可能不在您所处的页面上，但浏览器仍然需要计算。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2974761|请参阅：https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/|offset|length|2974762|捆绑样式表的优点：-页面加载性能|style|BOLD|2974763|捆绑样式表的缺点：--较慢的行为，这可能导致滚动、交互、动画、|2974764|结论:为了解决这两个问题，理想的解决方案是将所有的打包到一个文件中保存http请求，但使用从该文件中提取出您所在页面的css并使用它更新头部。|2974765|为了知道每个页面需要哪些共享组件，并降低复杂性，最好声明一下这个特定页面使用的所有组件--例如：|2974766|<style+href="global.css"+rel="stylesheet"/>
<body+data-shared-css-components="x,y,z">|code-block|syntax|javascript|2974767|entityMap|0|LINK|mutability|MUTABLE|url|https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/^0|0|4|28|0|0|0|9|0|0|9|0|0|P|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|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|6|7|17|8|@$D|18|E|19|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1A|8|@$D|1B|E|1C|H|I]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1D|8|@$D|1E|E|1F|H|I]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1G|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1H|8|@]|9|@]|A|$S|T]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

A bundled stylesheet may save page load performance but the more styles there are the slower the browser renders animations on the page you are on. This is caused by the huge amount of unused styles that may not be on the page you are on but the browser still has to calculate.

See: <a href="https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/" rel="nofollow">https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/</a>

Bundled stylesheets advantages:
- page load performance

Bundled stylesheets disadvantages:
- slower behaviour, which can cause choppyness during scrolling, interactivity, animation, 

Conclusion:
To solve both problems, for production the ideal solution is to bundle all the css into one file to save on http requests, but use javascript to extract from that file, the css for the page you are on and update the head with it.

To know which shared components are needed per page, and to reduce complexity, it would be nice to have declared all the components this particular page uses - for example:

<pre><code>&lt;style href="global.css" rel="stylesheet"/&gt;
&lt;body data-shared-css-components="x,y,z"&gt;
</code></pre>

blocks|key|1254995|text|历史上，拥有单个CSS文件的主要优点之一是使用HTTP1.1时的速度优势。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1254996|然而，截至2018年3月，超过80%25的浏览器支持HTTP2，它允许浏览器同时下载多个资源，并且能够先发制人地推送资源。对于所有页面都有一个CSS文件意味着比必要的文件大小更大。有了正确的设计，我认为这样做除了更容易编写代码之外，没有任何好处。|offset|length|1254997|为了获得最佳性能，HTTP2的理想设计是：|1254998|有一个核心CSS文件，其中包含跨所有页面使用的通用样式。|unordered-list-item|1254999|在单独的文件中具有特定于页的CSS。|1255000|使用HTTP2推送CSS以最小化等待时间(可以使用cookie来防止重复推送)|1255001|可以选择在折叠CSS的上方分离，然后将其第一次推送，然后加载剩余的CSS+(对于低带宽移动设备有用)。|1255002|如果希望加快以后的页面加载速度，还可以在页面加载后加载站点或特定页的剩余CSS。|1255003|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/HTTP/2^0|0|O|5|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$]]|$1|K|3|L|5|J|7|17|8|@]|9|@]|A|$]]|$1|M|3|N|5|J|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|19|8|@]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1A|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

Historically, one of the main advantages x in having a single CSS file is the speed benefit when using HTTP1.1.

However, as of March 2018 over 80% of browsers now support <a href="https://en.wikipedia.org/wiki/HTTP/2" rel="noreferrer">HTTP2</a> which allows the browser to download multiple resources simultaneously as well as being able to push resources pre-emptively. Having a single CSS file for all pages means a larger than necessary file size. With proper design, I don't see any advantage in doing this other than its easier to code.

The ideal design for HTTP2 for best performance would be:

<ul>
<li>Have a core CSS file which contains common styles used across all pages.</li>
<li>Have page specific CSS in a separate file</li>
<li>Use HTTP2 push CSS to minimise wait time (a cookie can be used to prevent repeated pushes)</li>
<li>Optionally separate above the fold CSS and push this first and load the remaining CSS later (useful for low-bandwidth mobile devices)</li>
<li>You could also load remaining CSS for the site or specific pages after the page has loaded if you want to speed up future page loads.</li>
</ul>

Is there any advantage to having a single monster .css file that contains style elements that will be used on almost every page?

I'm thinking that for ease of management, I'd like to pull out different types of CSS into a few files, and include every file in my main <code>&lt;link /&gt;</code> is that bad?

I'm thinking this is better

<ol>
<li>positions.css </li>
<li>buttons.css </li>
<li>tables.css</li>
<li>copy.css</li>
</ol>

vs.

<ol>
<li>site.css</li>
</ol>

Have you seen any gotchas with doing it one way vs. the other?

Single huge .css file vs. multiple smaller specific .css files?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

拥有一个包含几乎每个页面都将使用的样式元素的单怪物.css文件有什么好处吗？我在想，为了便于管理，我想把不同类型的CSS提取到几个文件中，并将每个文件都包含在我的主<link />中，这样不好吗？我觉得这样更好positions.cssbuttons.csstables.csscopy.css与site.css你见过用...

问单个大型.css文件与多个较小的特定.css文件？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单个大型.css文件与多个较小的特定.css文件？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单个大型.css文件与多个较小的特定.css文件？
EN