DEV Community

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

Collapse
 
ben profile image
Ben Halpern

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.

Collapse
 
jsn1nj4 profile image
Elliot Derhay

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.