Should I still bother keeping all css in one file?

Question

Once upon a time I was thought by more advanced web developers (gee, when was it again? ;)) that we should avoid managing multiple CSS files and stick to one per project. It helped to improve page load speed and avoid silly mistakes when dealing with a lot overlapping CSS rules.

My question is - is this approach still valid?

Argument about page load performance doesn't seem to hold that much nowadays with awesome broadband Internet and clever web browsers with even more awesome caching capabilities. CSS cascading can indeed be error prone, but just for inexperienced developer and having one CSS style sheet doesn't really make us bullet-proof.

I think that I would prefer to have a set of default style sheets neatly separated by components, then wire them up into one single rule by CSS @import. This would also allow me to include reset style sheet by default.

Anyone is with me?

Answer 1

It's not about bandwidth speed but number of http requests, this makes a lot of sense for a mobile connection.

However the approach of having different css files to keep the project modular is solid, as it helps you keeping your css organized the way you want it without having all the code in one file only. Then you can benefit of css preprocessors / minifiers to concatenate and compress all your css files in a single one for production.

this article http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/

has a paragraph about mobile that explains well why this is a good practice:

you are much better off downloading all of the CSS content in one shot over the initial, warmed up connection. By doing so, you will also help the user extend their battery life. If there is one optimization to be made here then it is simply: concatenate and compress.