vasilisvg/component-queries.md

## component-queries.md

      
    Raw
  

              component-queries.md
            
          
    Group media queries on component level

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.
Grouping on a component level looks like this

.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;
}
}
The classic way looks like this

.item1 {
    background: red;
}
.item2 {
    background: blue;
}
.item3 {
    background: purple;
}
@media (max-width:480px){
.item1 {
    background: green;
}
.item2 {
    background: yellow;
}
.item3 {
    background: papayawhip;
}
}