Imbriquer des média queries

bonjour,

je voudrais savoir si, dans le cas d'un responsive design, on peut créer des média queries qui se chevauchent.

par exemple imaginons que j'ai 2 'breaking points' : 600px et 1000px

je créé donc 3 media queries:
contexte 1/ < 600px
contexte 2/ >599px et <1000px
contexte 3/ >999Px

bon, rien que du classique....

maintenant imaginons que j'ai un élément dont le style css est le même dans les contextes 2 et 3, puis je créer une 4eme règle telle que:
contexte 4/ >599px
et mettre le style de cet élément dedans afin d'éviter de le dupliquer ?

en fait, je peux le faire bien sur, mais est ce que cette pratique est recommandable?

merci
Modifié par lionel_css3 (16 Aug 2013 - 23:30)

Bon j'ai essayé et apparemment ça pose pas de problème, par contre il faut être super organisé pour ne pas mettre des règles contradictoires dans le css mais ça évite les redondances....

si certains d'entre vous on déjà essayé, je suis preneur des remarques..

Bonjour,

c'est possible mais la difficulté va être de s'y retrouver à long terme sans confusion possible.
Ca fait 1 an que j'utilise des préfixes de classes correspondants à la MQ où elles seront actives (par défaut : pour 1024 puis des MQ pour desktop large, pour 768 et moins, 480 et moins et enfin 320 et moins) et on s'y retrouve. S'il fallait des préfixes pour dire "en 768 mais plus en 320", jamais nous ne nous y serions retrouvés. Même en bossant seul je m'y serais pas retrouvé je crois.
Dupliquer du code qui n'a pas la même action, ça ne fait que l'alourdir et ça c'est un défaut que la compression des feuilles de style devrait régler de façon transparente (gzip)