The common way to use media queries is to group all styling for a specific query. Leenull, a colleague of mine, came with the idea to use media queries on a component level. This might make make complex stylesheets easier to maintain.
I wonder what you think of it. Please let me know in the comments. Here's a link to a working example.
.item1 {
background: red;
}
@media (max-width:480px){
.item1 {
background: green;
}
}
.item2 {
background: blue;
}
@media (max-width:480px){
.item2 {
background: yellow;
}
}
.item3 {
background: purple;
}
@media (max-width:480px){
.item3 {
background: papayawhip;
}
}
.item1 {
background: red;
}
.item2 {
background: blue;
}
.item3 {
background: purple;
}
@media (max-width:480px){
.item1 {
background: green;
}
.item2 {
background: yellow;
}
.item3 {
background: papayawhip;
}
}
Here I am promoting my usual pet peeve, but: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#media
Basically what you do here, but nested (clear indication of relationship) and compiled to one single query. I know it's by far not the two cents you're looking for, but I think it illustrates how you have a fine idea which just can't be executed in plain CSS :-)