CSS Media queries: grouped with rule-sets or grouped at the bottom?

JSn1nj4 on September 10, 2018

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 ha... [Read Full]
markdown guide

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-mqpacker is a fantastic postcss plugin for this use case. It takes similar media queries and groups them.


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.


Sorry, I'm talking about vanilla CSS. Let me edit my post. I do see what you mean by that though.

code of conduct - report abuse