CSS - all media-querys in one file? or load separated CSS-files? [closed]

Question

what is the better solution:

1) make one CSS-File with all Media-Querys for all supported resolutions

<link rel="stylesheet" href="mobile.css" type="text/css" media="all" />

2) make a CSS-File for every supported resolution and load them in the header

<link rel="stylesheet" href="mobile.css" type="text/css" media="screen and (min-width:240px) and (max-width:639px)" />
<link rel="stylesheet" href="tablet.css" type="text/css" media="screen and (min-width:640px) and (max-width:1023px)" />

???

I mean, in attempt 2) there are more requests, but is that really that important?

Answer 1

Fewer requests is always favourable due to the nature of HTTP 1.1 (new TCP connections are established for each separate request which takes time).

I'd strongly recommend using as few requests as possible throughout your application. However, for CSS one could use SASS or LESS to compile several files into one single CSS-file. The same can be achieved in numerous ways with JavaScript, eg with online tools.

The media query will not stop the request of the file, no matter the current screen size:

It's also worth noting that SPDY and HTTP 2.0 are well on their way of being available on most major browsers.