Comment organisez-vous vos media-queries ?

Bonjour à tous,

Je cherche un peu sur une façon simple mais maintenable d'organiser correctement mon code CSS avec des media-queries.

Il y a deux façons pour moi de le faire et dans les deux cas, on commence à écire en mobile first pour ensuite adapter aux différents écrans avec des media queries.

.class-1 {
    color: red;
}
@media only screen and (min-width: 40em)  {
    .class-1 {
        color: green;
    }
}
@media only screen and (min-width: 64em)  {
    .class-1 {
        color: blue;
    }
}
.class-2 {
    margin: 10px;
}
@media only screen and (min-width: 40em)  {
    .class-2 {
        margin: 20px;
    }
}
@media only screen and (min-width: 64em)  {
    .class-2 {
        margin: 30px;
    }
}

OU

.class-1 {
    color: red;
}
.class-2 {
    margin: 10px;
}
@media only screen and (min-width: 40em)  {
    .class-1 {
        color: green;
    }
    .class-2 {
        margin: 20px;
    }
}
@media only screen and (min-width: 64em)  {
    .class-1 {
        color: blue;
    }
    .class-2 {
        margin: 30px;
    }
}

Vous imaginez ça avec x classes, le code est plus gros. Personnellemet, j'opterai pour la deuxième version, plus simple pour s'y retrouver (on sait que lorsqu'on est dans un media-query, on gère une taille d'écran minimum). Alors que la première, il y a x media-queries pour x classes.

Qu'en pensez-vous, que faites vous pour être plus maintenable ?