CSS performance vs media query placement

Question

I am working on my second foray into designing a responsive website for my business. I am wondering about best way to organize my css file with browser rendering performance in mind.

There will be only one css file, with all media query included (have three breaks: full size, tablet vertical, phone). Currently all my media queries come at the end of the file (easier to find what I am fine tuning at the moment). I had pondered creating a full css for each break, then calling them individually based on media queries, but was recently reading that tests have shown that browsers still download all the different css files but then only use the appropriate one, which just means more downloading without any benefit.

Once everything is ready would it be better to move the various M-Q's to sit right after their "default" css counterpart (ie the vertical tablet body font size, right after the "default" body font size). Or does the browser read through the entirety of the CSS file before starting to render the page.

Putting the M-Q's as snippets scattered around the css file, makes for a bigger initial css file download due to the replicated @media code for each snippet. But if it causes the browser to render quicker ....

The aspect that got me wondering was base font size, as I will be modifying it slightly for tablets vs phones vs desktop to accommodate the viewing distances. And since all font sizes, padding and margins are based on rem units, changing the base size effects a lot of items.

So from a purely performance point of view (download and browser rendering) is one method preferable over the other(s)?

additional details ...

I guess perhaps what I should be asking, how does a browser use the css file. Does it read through the entire css file and then start to render? Or does it start rendering with the first line of css and then the next line and the next line?

Answer 1

Well, i am not sure, for not having tested this exaustively, but, per example w3.org site is using the 'load by media query' technique.

<link rel="stylesheet" href="/2008/site/css/minimum" type="text/css"
    media="handheld, all" />
<style type="text/css"
    media="print, screen and (min-width: 481px)">
/*<![CDATA[*/
@import url("/2008/site/css/advanced");
/*]]>*/
</style>
<link href="/2008/site/css/minimum" rel="stylesheet" type="text/css"
    media="handheld, only screen and (max-device-width: 480px)" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="/2008/site/css/print" type="text/css"
    media="print" />

in order to make the browser load assets by media types.

This way, not all has to be loaded at first. Take example with the media="print". The printing style sheet is not loaded except for printing.

In your question you are mentionning 1 single .css file, so, maybe you are stucked, but if you can split your file in 3 different files, the example would help. The counter part is that if you use 'sizing' queries, the browser might have to download the next css file if the user minimize or reduce the viewport.

Also, if your design is NOT to change much, or if the resulting file is quite small, yes, 1 single .css file will be better than different files scoped by media-queries (for maintenance and caching).

Hope this helps