For performance, use one or several css files ?

Question

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 seems better to use only one large file.

What's your advice ?

Answer 1

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 minifying frameworks exist, that merge together all the CSS (and JavaScript) files for each page and serve them in one request.

Answer 2

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

Answer 3

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.

Answer 4

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:

http://code.google.com/p/minify/

Answer 5

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.

Answer 6

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.

Answer 7

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 minification tool.

Grz, Kris.

Answer 8

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).

Answer 9

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

---

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 http://www.killersites.com/blog/2008/how-to-organize-css/

---

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

Answer 10

http://stackoverflow.com/questions/3065583/proper-way-to-use-multiple-stylesheets-so-it-works/3071741#3071741

Answer 11

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 "staged" 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.

Good luck

Answer 12

Weigh it up.

The advantages of one CSS file

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

Advantages of multiple

• Change one file won't require all css to be re-downloaded. The other css can be served from the cache
• Structure
• 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