View http://ianstormtaylor.com/media-queries-are-a-hack/
This article ruffled a few feathers recently, but I agree with most of it. Media queries really broke open all of our minds regarding how we should approach both design and development, but as is often a byproduct of such a realization we are quick to discover limitations. Media queries are, for the most part rudimentary, and Ian hits the nail on the head when he expresses his main gripe:
Media queries are not that. They’re write-everywhere. They’re relative to your screen, so every time you write a media query for max-width or min-width, you’re connecting the appearance of your module to the width of the entire canvas—exactly what you were trying to avoid.
There’s no avoiding it, that’s how media queries exist today. I recall a decent conversation taking place regarding the breaking of media queries into repeated implementations per module so as to better align with Sass partial organization, and it’s something I’ve adopted, but I can’t help but be bothered by the huge repetition in the resulting stylesheet. Sure, gzipping will likely take care of that issue entirely, but it remains that media query declarations are repeated many times when taking this approach.
We still haven’t even taken into account the (possibly bigger) issue of context. Even our most modular CSS can have a number of conditions based on their context. While it may seem that our modular CSS might not be so modular if we’re having this problem, it’s something I constantly find myself butting heads with, edge cases or otherwise.
I think Ian’s proposed solution is really neat, it’s something I hadn’t even taken the time to think about before. This is a great article, well worth your read.