- This topic is empty.
-
AuthorPosts
-
April 8, 2013 at 10:32 am #43963akurtulaParticipant
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.April 8, 2013 at 10:39 am #131023Paulie_DMemberOther 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.
April 8, 2013 at 2:44 pm #131035CrocoDillonParticipantHaving 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.
April 8, 2013 at 3:58 pm #131044TheDocMember> 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/April 8, 2013 at 4:08 pm #131046Paulie_DMember>not if you’re using SCSS/SASS
Unfortunately, we’re not all that fortunate.
April 8, 2013 at 4:46 pm #131049akurtulaParticipant@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
ThanksApril 8, 2013 at 4:48 pm #131051April 8, 2013 at 4:49 pm #131052TheDocMember@akurtula – it doesn’t effect ‘performance’, per se. But it will lead to a slightly larger file size.
April 8, 2013 at 5:29 pm #131058akurtulaParticipantYes, I’ll have to keep that in mind
April 8, 2013 at 5:31 pm #131059CrocoDillonParticipantYeah 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.
April 8, 2013 at 5:39 pm #131062CrocoDillonParticipantI 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) :)
April 8, 2013 at 8:32 pm #131073akurtulaParticipantThanks @CrocoDillon, great to know that comparison
April 9, 2013 at 7:26 am #131115wolfcry911Participant@CrocoDillon, I don’t think that’s a good test case – the compression is looking for patterns and you’ve provided 1000 duplicated patterns.
April 9, 2013 at 7:50 am #131119CrocoDillonParticipantI 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.
April 9, 2013 at 8:16 am #131125 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.