here is an example of my style sheet
.global-style-one { ... }
.mobile-style-one { .global-style-one }
PROBLEM: The repeating 100’s of global styles inside media query will bloat the CSS. (I know you can use SASS to rescue) but that will still print all the global styles in css when it is compiled. I want to keep the compiled css file to minimum size.
SOLUTION? so i was thinking if there was a way to add an extra class to mobile style in html markup and call the global style inside the mobile style media query on the fly using jQuery?
Something Like this…
.mobile-style-one .has-global-style-one { ... }
If .mobile-style-* has.has-global-style-*find .global-style-one in styles.css and add it to.mobile-style-one`.in DOM?
I know this is not a perfect solution i’m trying to find out if there is a better way to do this and avoid writing 100’s of global styles once again inside the media query.
Here is a codepen
Thanks