Comment organisez-vous vos media-queries ?

Par JeremyB, il y a 10 ans

Les bases HTML/CSS

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 ?

5 réponses

MrCastor, il y a 10 ans

Sans hésitation, la 2ème version.
Personnellement, j'utilise le scss, je crée un fichier par format que j'importe dans mon style global.
Tu peux aussi créer plusieurs fichiers css que tu affiche en fonction de la résolution.

shinix, il y a 10 ans

Moi perso je fais par fichier CSS à savoir style.css version sans media-queries, smartphones.css pour ceux qui touchent les dimensions d'un smartphone et idem pour tablette.

JeremyB, il y a 10 ans

Pour afficher le fichier css en fonction de la résolution, vous parlez en faisant ça ?

<link rel="stylesheet" href="smartphone.css" media="screen and (max-width: 40em)"> <link rel="stylesheet" href="tablet.css" media="screen and (max-width: 60em)"> <link rel="stylesheet" href="desktop.css" media="screen and (max-width: 80em)">

Est-ce plus performant du fait que ça ne télécharge pas les 3 css mais qu'un seul ?

duffJohn, il y a 10 ans

Salut,
Forcement si tu charge un petit css au lieu d'un gros fichier css ce sera plus performant...
Mais sinon niveau maintenance je te conseil soit d'utiliser le scss ou alors d'utiliser plusieurs fichiers css.

JeremyB, il y a 10 ans

Je suis d'accord avec toi. Mais j'ignore si dans le code proposé juste au dessus, est-ce que si le premier link rempli la condition, il ne télécharge que celui-ci ou les 3 fichiers seront quand même tous téléchargés (j'ai lu que le téléchargement de plusieurs css ne se fait pas en parallèle donc plus lourd à charger au final).