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;
}
}
@vasilisvg When building a stylesheet when you use the mobile first approach, all the mobile styles normally go on top. The other versioned websites are nicely grouped on the bottom. When they are scattered through the entire file it is harder to maintain it when stuff gets updated imo...