[Solved]Does the location of media queries affect the website?

[akurtula]

Hi

I tend to write the media queries where I need them like this for example:

header{
…
}
@media (max-width: 800px){
.header{
…
}
}
footer{
…
}
@media (max-width: 800px){
footer{
…
}
}

Rather then having the media queries seperate

@media (max-width: 800px){
.header{
…
}
footer{
…
}
}
I find the first method to be much more maintainable. However is there a “right way” to do it. So beyond personal preferences, is there any other reason to favor one over the other interms of css performance or anything else.

[Paulie_D]

Other than a few characters /bytes difference…I think you’ll find we’re pretty much evenly divided on the subject.

Personally, I prefer to keep everything under in one media query but that’s just me.

[CrocoDillon]

Having one MQ is easier to maintain if you want to change the breakpoint. Question is if you want to change the breakpoint for all elements of just a few though.

I don’t know where I’ve read it but iirc I’ve read somewhere that performance will be the same either way, so personal preference here.

[TheDoc]

> Having one MQ is easier to maintain if you want to change the breakpoint.

@CrocoDillon – not if you’re using SCSS/SASS! https://css-tricks.com/media-queries-sass-3-2-and-codekit/

[Paulie_D]

>not if you’re using SCSS/SASS

Unfortunately, we’re not all that fortunate.

[akurtula]

@CrocoDillon – I have been using the same technique as shown in the link provided by @TheDoc so maintenance is easy in this case.
It’s good to know that it does not effect performance
Thanks

[TheDoc]

> Unfortunately, we’re not all that fortunate.

What do you mean? @Paulie_D

[TheDoc]

@akurtula – it doesn’t effect ‘performance’, per se. But it will lead to a slightly larger file size.

[akurtula]

Yes, I’ll have to keep that in mind

[CrocoDillon]

Yeah of course, I meant if you aren’t using any CSS preprocessor (like me :P )

I don’t got any tests to prove it but if you use gzip the file increase (gzipped) will be even less than slightly since it compresses duplicated strings effectively.

[CrocoDillon]

I just ran a test using my current project. The css file as it is now is 6.4 kB and 2.5 kB gzipped. I added 100 media queries (empty ones buy exact copies).

File size went up to 10.3 kB but gzipped it stayed at 2.5 kB. So I added 900 more media queries (1000 total).

File size went up to 45.4 kB but gzipped only went up to 2.7 kB.

So don’t worry about file size if you use gzip (like you should) :)

[akurtula]

Thanks @CrocoDillon, great to know that comparison

[wolfcry911]

@CrocoDillon, I don’t think that’s a good test case – the compression is looking for patterns and you’ve provided 1000 duplicated patterns.

[CrocoDillon]

I think I explicitly mentioned that. It’s a small and simple test to prove how efficient gzipping is with duplicating strings, which was the main concern, increase of size by having *the same* MQ multiple times.

I did rerun the test however, with 100 duplicate MQs with different contents. Feel free to make a better test :)

New results: 13.4 kB and 2.8 kB gzipped. Less dramatic, more realistic but still impressive results.

[Paulie_D]

>What do you mean? @Paulie_D

Because Codekit isn’t available for Windows and I have yet to find anything (including Scout) that works as well ‘out of the box’.

I’m dwelling on investing in the Compass App but a free trial doesn’t seem to be available.

[Author]

Posts