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 Aren't you a professional alike? I'm not putting myself above anyone else, so no need to call me a professional when I know we all are :-) I'm not telling you what a best practice is or what others in some circles have agreed on. It was a mere illustration that some things are shitty with CSS and will remain so until the syntax evolves, however you group them.