Nsryjdtyk

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?

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.

Yes, that approach is still valid. There are dozens of articles about load optimization out there, but the general idea is as follows

Less files = less http requests made to server = better load performance

Main thing that changed over time is that now there are many tools that support merging multiple files into single at runtime. So you have separate stylesheets for better organization, debugging at development time, and those tools merge, minify and set correct caching headers at production.

I agree with you, I find no reason to keep only a single css sheet anymore, nowadays, I do exactly what you just stated, separation by component, along with lazy loading :) (php if statements etc).

I separate stuff with comments. For example divs goes to /* Divs start*/ div#somediv /* Divs end*/ /* Animations start*/ /* Animations end*/. For me this is easier than merging different css files once i've completed the project