Group media queries on component level, not on query level

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;
}
}

@roytomeij I consider the people who make Sass to be people who have thought really well about these issues. That's all I meant.

@vasilisvg Sorry, apparently I figured you meant something else than you did. Bad day I guess. Sorry again, highly value your insights.

@roytomeij No problem! (-:

@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...