For a site I currently use style.css and a bunch of other stylesheets, 960.css, etc., loaded like this:
<link rel="stylesheet" media="screen" href="css/style.css">
<link rel="stylesheet" media="only screen and (max-width: 960px)" href="css/960.css">
....
Now I am concerned about speed. I know I could combine the files into one big file, but that would mean downloading also irrelevant data.
So basically, my question is: What is a better approach, minimizing the amount of requests, or minimizing the amount of data passed to one user?
It is basically about the performance of your system.
even if you are on mobile devices the best approach would be to minimize the amount of requests because of a (maybe) slow network connection and a (maybe) slow resource handling. besides your page is on e.g. a cordova context this approach would be the way to go because the resource were installed directly on the device. multiple files => multiple handles => slow (er) performance.
if you want to minimize the amount of data passed to the user - the amount is IMHO the same because the tag will query the css file on the server and will parse/read/download it. IMHO there is no relevant performance issue. what you can do is to generate and "non-redundant" css file. but thats not really petty :)