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.”
@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.
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?
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?
That seems logical to me....but...I could be wrong.
Look at the way 320andup Mobile First boilerplate does SCSS and media queries. IMO, real power of SCSS is to break up different parts into modules then just render them by importing.
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
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
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.
I'm not quite sure I'm understanding your concerns. What exactly are you trying to solve with a SASS mixin that would help you write better media queries?
for mobile websites, all media query content would be all over the place
In the previously linked 320andup template, all the files are compiled into one singular CSS file. The base style is what get's delivered to every mobile device, then as the view-port increases, you alter you design in the appropriate SASS break point file. To me this makes more sense, so if you need to make any changes or your design is not quite right at certain break point you know exactly where to go to make changes. How is this all over the place?
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?
From my understanding the entire stylesheet is loaded and then evaluated by the browser. The evaluation process is different from browser to browser, but every style in your css is evaluated before the paint process. This is what makes media queries so effective, there is no time wasted in recalculating the layout. All styles in the stylesheet are calculated in the original layout calculation (this assumes one CSS file). Unlike JavaScript where the layout may be recalculated multiple times before paint.
So in short moving your media queries will not have noticeable (if any) affect on you page paint speed.
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). http://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
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.
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.
@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.
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?
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?
That seems logical to me....but...I could be wrong.
yeh @pauli_D you may be right!
Look at the way 320andup Mobile First boilerplate does SCSS and media queries. IMO, real power of SCSS is to break up different parts into modules then just render them by importing.
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
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
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
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.
@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.
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
?
I'm not quite sure I'm understanding your concerns. What exactly are you trying to solve with a SASS mixin that would help you write better media queries?
In the previously linked 320andup template, all the files are compiled into one singular CSS file. The base style is what get's delivered to every mobile device, then as the view-port increases, you alter you design in the appropriate SASS break point file. To me this makes more sense, so if you need to make any changes or your design is not quite right at certain break point you know exactly where to go to make changes. How is this all over the place?
Never mind! You seem to have misunderstood this post, and this is no longer a concern.
In short, we agree on the same thing.
From my understanding the entire stylesheet is loaded and then evaluated by the browser. The evaluation process is different from browser to browser, but every style in your css is evaluated before the paint process. This is what makes media queries so effective, there is no time wasted in recalculating the layout. All styles in the stylesheet are calculated in the original layout calculation (this assumes one CSS file). Unlike JavaScript where the layout may be recalculated multiple times before paint.
So in short moving your media queries will not have noticeable (if any) affect on you page paint speed.