Keeping main.css clear of hacks but maintainable

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:

  1. Keeping main.css clean of IE hacks
  2. Easy mainteance by grouping media queries, and IE specific styles at one place.
  3. While I'm at it, save some works by NOT having to copy and paste mobile/desktop styles to oldie.css for fallback

© 2015 - Mon Sucher