I was reading CSS Tricks' Conditional Media Queries Mixin, I liked the idea but unfortunately, since the "best practice" is "Mobile First" (Smallest screen to Largest: using min-width), and they're using max-width. So by swapping min-width in there, it didn't work as well. I guess another way is to shove all Media Queries into oldie.css so each Media Query would overwrite each other, but that's ugly. BUT! I came up with a system that might be even better borrowing the same idea as CSS Tricks. The following is what my mixins are trying to accomplish:
- Keeping main.css clean of IE hacks
- Easy mainteance by grouping media queries, and IE specific styles at one place.
- While I'm at it, save some works by NOT having to copy and paste mobile/desktop styles to oldie.css for fallback