We deal with this for desktop websites, as once cached and gzipped, it doesn’t really make a huge difference, HOWEVER, for mobile websites, all media query content would be all over the place.
Do you think it would be a better solution to write the media queries in SCSS the same way you would if it was vanilla CSS, as opposed to as a breakpoint mixin? That way, when the CSS oututs, all your mobile stuff will be right at the top of the stylesheet, and then your media query CSS near the bottom. Plus this also helps keep your CSS separate for different screen sizes.
> “… we hashed out whether there were performance implications of combining vs scattering Media Queries and came to the conclusion that the difference, while ugly, is minimal at worst, essentially non-existent at best.”
Ok forget SCSS and mobile for now, my question was really this…
If you had a 3000 line css stylesheet, and needed 500 of those lines instantly, would you put those at the top of the stylesheet? Would the styles be applied once the whole stylesheet has downloaded, or do the styles get applied progressively as the file gets downloaded?
If it is the latter, although probably very minimal, there is an advantage. If styles are only applied once the entire stylesheet is downloaded, then yes there is no advantage.
As far as I know…and I’m willing to be corrected…the whole stylesheet has to be read (and cached as it were) so that as the HTML is progressively rendered the browser knows where to put things and how to style them. That’s why it’s in the [head]…isn’t it?
Yes I have looked at them and many other mobile-first frameworks, and none of them use mixins, although not sure if it was a consideration or not for them. But yes I do like the idea of having specific media queries in their own module, hence why I decided against using mixins
Could be…but what is it rendering? If the CSS file is in the head, it’s read first by the browser before the body so, logically (but not necessarily actually) it’s read and **cached** by the browser to render the HTML elements correctly when they are read by the browser.
If that wasn’t the case wouldn’t we get a flash of unstyled…erm…everything…before the CSS kicks in…as it were?
@AlenAbdula sorry I meant they do not use ‘media query mixins’ – the subject of this article. A lot of these sites/frameworks put all there media queries at the bottom.
I have been looking more into this and I am finding more and more information about exactly what @Paulie_D is saying. The browser downloads ALL stylesheets in the head before it begins to render the page, which is why stylesheets must always be in the head. Until I hear different, I am assuming this from now on.