Worth a try? I honestly don’t think so. Let’s have a look.

1. Performance.

There have been numerous articles regarding media query repetition and effect it has on performance (rendering and speed) and the common answer is always that there’s no effect on performance whatsoever whether you use few or many of the same media queries scattered around. Obviously if you end up having thousands of media queries, you really need to rethink your strategy and look at a different approach of designing your CSS.

• https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/
• http://aaronjensen.github.io/media_query_test/

2. Bloat.

Some claim that inline media queries, when nested inside declarations, create bloat on output. So essentially you can end up having 200 same media queries. But does it really matter? Your minified output file is not something you end up editting anyway, so why should it matter how many queries it outputs if performance isn’t affected. If you are such a purist, fallback to combing media queries as post process. But that is prone to errors if you don’t have a good media query setup, like working only with min-width or max-width for example.

3. Size.

You might say that many queries increase file size. Well, if you look at the gzipped size of a CSS file with few vs many media queries, the difference is negligible. So why bother going through all the hoops of trying to save a few bytes.

4. Workflow.

This one I can’t really argue since it’s a personal preference. If something works for you and your team, then you should continue practising it. However when working in a component/module based environment, having to split up media queries from a component through use of mixins seems an overkill and a hassle to maintain. If you decide to remove a component and all its usage, you need to remember to find and remove all media query references as well.