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

Posted by Chris Thomas
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points

Sass - Inline or combined media queries?

I'm really conflicted here and can't figure out how I want to proceed in majority of my future projects.

In the past (whether it's plain CSS or Sass) I've written an entirely separate Media Query for tablet & desktop views while writing the base code mobile first. I started to learn Sass and placed these in a _media-query.scss partial file for organization reasons.

Now that I'm learning more with mixins and using the @content block I find it would be easier to right my queries inline within that particular rule since mixins can be nested. The only problem with this is that the outputted CSS will be completely bloated with multiple media queries of the same breakpoint as opposed to a single one. Not very DRY.

This article outlines that there is really NO performance impact by the multiple queries though. http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries

This article also outlines what I'm talking about. https://benfrain.com/inline-or-combined-media-queries-in-sass-fight/

The more I read it seems that inline media queries are the norm. I just haven't written them this way yet and want to know if I should. I honestly will probably never touch majority of my CSS files are always work directly with the Sass/SCSS file.

So I'm curious what's the more common way to do this?

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

That's how I do it, to be honest. I write media queries inline letting sass do the heavy lifting. And that's not breaking the DRY principal. DRY only refers to you, the developer, and what you type. In this case, you're letting the computer create the repeating code, so it's fine.

This is a pretty cool article on that: https://davidwalsh.name/write-media-queries-sass

Chris Thomas
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points

I was just reading that article! Thanks Kevin, I'll begin using this approach. I guess I just wanted some reassurance in this way of doing it.

Sarika Rani
Sarika Rani
11,214 Points
Sarika Rani
Sarika Rani
11,214 Points

i have same question in my mind past few months but now its clear ... thank you for asking this question chris and thank you for the best ans Kevin ..