There are better ways to use media queries. In your CSS use a variable for the property that changes, and put the fallback in it too. In that way the next per

There are better ways to use media queries. In your CSS use a variable for the property that changes, and put the fallback in it too. In that way the next person to work on the code can see what changes. In your media queries only have CSS variables, as locally scoped as possible, and name them after the property with -- at the front. On this way it is self evident what the media queries are about. For example: p { color: var(--color, black); } @query { p { color: chocolate; } } And have the queries after the CSS for legibility. By writing CSS this way, your source will be compact and easy to maintain. Because of this you won't need to mangle it with CSS mangling tools or bother with CSS minifiers. Your production time will speed up immensely. Also, style the elements, then add classes and IDs if you have to. Stay away from div's, use all the semantic elements with CSS grid and you will get much better results.