Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Simon Beer
PLUS
Simon Beer
Courses Plus Student 9,251 Points
Posted by Simon Beer
Simon Beer
Courses Plus Student 9,251 Points

SASS: Does nesting the media queries inside element rules affect performance?

Using SASS, I'm starting to understand the benefits of keeping the media queries with each element…

Surely this creates lots of tiny media queries? Does this affect performance when loading the page? ie. more work for the server…

Simon

3 Answers

Simon Beer
PLUS
Simon Beer
Courses Plus Student 9,251 Points
Simon Beer
Simon Beer
Courses Plus Student 9,251 Points

Thanks to Guil who answered via Twitter: It does output separate media queries, but makes makes little difference -- if any -- to performance.

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

Every one has their method for using media queries, personally I like to have them at the bottom of page so I can see everything changing at which breakpoint. I don't believe there is really a speed issue that would effect your site unless you are working with something like bootstrap ie. 20 sass files being called or something like that.

Simon Beer
PLUS
Simon Beer
Courses Plus Student 9,251 Points
Simon Beer
Simon Beer
Courses Plus Student 9,251 Points

Hi Jacob!

Thanks so much for your answer. :)

Not 100% sure if my question was clear… I was referring to Guil's video: https://teamtreehouse.com/library/css-to-sass/refactoring-with-sass/defining-media-queries

In the video, instead of keeping all media queries together, he suggests splitting the media queries into parts, local to the component.

So it seems there will be many more @media calls outputted in the final css file. Am I correct in this conclusion? If so… will it have any effect on browser loads?

Thanks, Simon.