I've been using CSS for several years, and I've always grouped my media queries at the bottom of any file they were in. For me, this prevented having to write multiple media queries for the same screen size (or range, as the case may be).
Grouped Media Queries Example
/* general styles */
.selector-1 {
padding: 10px;
}
.selector-2 {
font-size: 18px;
}
/* responsive styles */
@media (max-width: 767px) {
.selector-1 {
padding: 5px;
}
}
@media (max-width: 479px) {
.selector-2 {
font-size: 14px;
}
}
I was also under the impression that adding more media queries would reduce performance (outside of having to load a larger CSS file).
Lately though, I've been seeing individual media queries grouped with related selectors.
Grouped By Selectors Example
/* .selector-1 styles */
.selector-1 {
padding: 10px;
}
@media (max-width: 767px) {
.selector-1 {
padding: 5px;
}
}
/* .selector-2 styles */
.selector-2 {
font-size: 18px;
}
@media (max-width: 479px) {
.selector-2 {
font-size: 14px;
}
}
I do see the immediately obvious benefits to this, but I figured I'd ask for opinions on either or both, and whether there really is a performance impact as the number of media queries increases.
I should also mention that I tend to work on projects that involve a lot of CSS; I work mostly on WordPress websites with a lot of pre-existing CSS to work around. Just throwing that out there for some context.
To avoid any confusion, I'm referring to vanilla CSS specifically, not a pre-processor like Sass or LESS.
Top comments (9)
Grouped with rule sets then use postcss to group at the bottom. You get the best of both worlds this way. Highly readable styling with the most performant solution for the browser.
css-mqpackeris a fantastic postcss plugin for this use case. It takes similar media queries and groups them.Hey, Steve! I was googling a solution to exactly that. Came across your answer, didn't know what PostCSS was, spent half a day learning it, implemented it on my project, got the plugin you mentioned and was able to solve that. Just wanted you to know that your reply is still helping people 3 years later :)
Glad this comment helped you!
I’ve been over in CSS-in-JS land for the last two years and still come back to PostCSS for personal projects or if I had to start a design system from scratch, I’d probably implement it with PostCSS. Still the most versatile solution IMHO, especially with all the features landing in CSS spec these days.
MWith postcss you can do anything. The article exclude post-pre processors.
BTW i used to do nesting media queries inside each selector that he never had more than 1 nested selector. But, since postcss nesting will remove the nesting media queries feature (because it doesn’t exists in nesting spec) i need to think a new approach. Maybe the plugin you mentioned will help me.
Oh, nice! I'll have to look into that. Thanks!
Ive found that coupling alongside the related selectors has been most intuitive for myself.
With scss nesting it’s especially so.
The other option of grouping media queries at the bottom seems cleaner but it’s never worked out like that to me.
I can see that with SCSS, especially when breaking it up into partials or, say, including SCSS in Vue components.
I mainly did the former so I wouldn't have to write more than 1 of the same media query. It also helped me see what screen size ranges I have covered when scrolling through the bottom.
But I did see someone else (and now you too) mention that it's easier to work with related selectors that are kept together.
Nested or after the selector
Sorry, I'm talking about vanilla CSS. Let me edit my post. I do see what you mean by that though.