Combine media queries or write them where it suits?
I'm a fan of writing media queries underneath the original "normal" rule. For example, let's say I want to change the width of a couple of different elements, which are written at different places in the style sheet, depending upon the viewport width. I would typically do this:
.thing {
width: 50%;
}
@media (min-width: 30rem) {
.thing {
width: 75%;
}
}
/* A few more styles would go between them */
.thing2 {
width: 65%;
}
@media (min-width: 30rem) {
.thing2 {
width: 75%;
}
}
Can you see in this example, we have two separate media queries written testing for the same thing: @media (min-width: 30rem)? Surely duplicating media at-rules like this is overly verbose and wasteful? Shouldn't I be advocating grouping all the like media queries into a single block like this:
.thing {
width: 50%;
}
.thing2 {
width: 65%;
}
@media (min-width: 30rem) {
...