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.
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 :)
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.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!
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.