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

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.