Media Queries mixins in SCSS – Which approach for Mobile-first CSS?

[croydon86]

Hi guys

For those that have used media query mixins in SCSS, you’re probably aware how it outputs in the CSS file (media query rule repeats at every selector). https://css-tricks.com/media-queries-sass-3-2-and-codekit/

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.

Would like to hear your thoughts.

Thanks

[Kitty Giraudel]

Really, it makes very few if no difference whether you merge the media query calls or not. See this article as a reference: http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries.

> “… 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.”

If you really want to merge them, you can use this gem which seems to do the job pretty well: https://github.com/aaronjensen/sass-media_query_combiner.

On a side note, as far as I know, Sass engineers are looking for a better compression process for media queries.

[croydon86]

@HugoGiraudel Yes I saw that article aswell, which is why I said it doesn’t really make a difference. My question was more for a mobile-first approach which the article doesn’t mention.

When a stylesheet is read by the browser, it starts from the top and works it’s way down the stylesheet. My argument was if all the mobile css was near the top, would that not be better for mobile?

I have actually opted for this approach, as it also keeps all my media queries together.

[Paulie_D]

>When a stylesheet is read by the browser, it starts from the top and works it’s way down the stylesheet. My argument was if all the mobile css was near the top, would that not be better for mobile?

It’s going to load and READ the **entire** stylesheet anyway…isn’t it?

It’s just not going to apply any additional styles as they haven’t been overridden by anything.

So performance isn’t really a big issue in this respect…or am I missing something?

[croydon86]

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.

[Paulie_D]

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?

That seems logical to me….but…I could be wrong.

[croydon86]

yeh @pauli_D you may be right!

[Alen]

Look at the way [320andup Mobile First boilerplate](https://github.com/malarkey/320andup/tree/master/scss) does SCSS and media queries. IMO, real power of SCSS is to break up different parts into modules then just render them by importing.

[croydon86]

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

[Alen]

What do you mean by ‘none of them use mixins’? How do you plan on using them?

Here’s mixin file from 320andup https://github.com/malarkey/320andup/blob/master/scss/_mixins.scss

[Kitty Giraudel]

As far as I know, CSS is rendered when read. However @Paulie_D and I seem to have different opinions on the topic, which is kind of unusual. Anyone to settle this please? :D

[Paulie_D]

>CSS is rendered when read

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?

Dunno…seriously…

I

Don’t

Know.

[croydon86]

@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.

[Alen]

http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32

[croydon86]

?

[Author]

Posts