Multiple CSS files vs combined file

Question

So everyone knows the pros of having a single CSS file for a webpage.

• Only one HTTP request is needed to fetch it
• Once stored in cache, all webpages using it will be blessed

But I think there's a great pro of having multiple CSS files

• All CSS files will be downloaded parallely, thus less time...

So If I have 500KB of code of CSS and internet speed of 50KBps (yes, i live in a poor country :-/ )...

method A will take (10+x)secs     # where x is the time for HTTP request
method B should take (1+x)secs    # if I divide it into 10 files

Am I wrong, If I say "Method B is much better" ?

Answer 1

First of all, I would recommend that you use a CSS Minifier, like http://cssminifier.com/.

Regarding your speed test, in your case maybe is really faster to use multiple files, but try it and test your page at Google's PageSpeed Insights

Specially if your target is your own country, and if you know that the internet is slow all over there.

Answer 2

From Here

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