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;
}
}
Among colleagues we have different opinions on this. It's nice to see what happens when a viewport is smaller than 480px (when all styles are grouped) but it can also be useful to see what happens to every element separately through a media query. We used your first example for our Fork-website (www.fork-cms.com) which was a good testcase for this discussion.
Curious to see what others think about the matter.
Personally, I would use your second example because it's easier to keep your code up to date and I like seeing what happens to the whole picture when inside a media query.