Media queries et css : question pratique

Bonjour,
Il semble, d'après ce que j'ai lu, qu'il vaut mieux limiter le nombre de pages de css pour qu'il y ait un seul appel.
Je suis en train de passer mon site de 1500 pages en responsive. J'ai des chapitres (quelquefois une centaine de pages) pour lesquels je change de styles de couleurs.
Avant, dans l'ancien monde comme diraient certains , j'avais un style-gen.css (style général) et un bio.css par exemple pour changer la couleur de ce chapitre. Maintenant, mon style-gen.css avec les media queries, et les commentaires pour que je m'y retrouve, doit faire 2000 lignes, d'où plusieurs questions.
1. Faut-il séparer la css de la grille comme on le voit souvent du reste des css, i.e. grid.css et style-gen.css.
2. Pour le style-gen.css, vaut-il mieux positionner les media queries pour chaque style, i.e pour body, tel media queries, pour h2, tel media queries ou alors, les mettre tous dans un même, i.e. pour tel media queries body, h2… ? Est-ce que cela change quelque chose à la vitesse d'exécution ?
3. Pour les changement de couleurs, comment indiquer qu'on est dans tel chapitre ou vaut-il mieux laisser les css spéciaux qui ne font qu'une vingtaine de lignes ?
Merci d'avance pour vos réponse pertinentes.

Une seule feuille de style est suffisante. La raison pour laquelle les grilles peuvent être désolidarisées du reste est qu'elles proviennent probablement d'un framework, importé tel quel dans la page sans avoir été intégré au reste du CSS.

Pour une question de maintenance du code, surtout si le CSS fait des centaines de lignes, je conseille d'adjoindre les medias queries concernées par un même élément plutôt que de les regrouper par résolution comme cela se faisait au tout début du responsive. De manière générale il faut regrouper le code par modules (menu, accordéon, système d'onglets, etc).

Pour la Q3 tu peux laisser le code dans la page (un compromis), mais aussi créer une petite feuille css dédiée appelée tout spécialement pour cette page.
Modifié par Olivier C (03 Sep 2017 - 14:16)

Merci beaucoup pour ta réponse

Bonjour,

à moins d'avoir 2 moitié de sites bien distincts ou une grosse CSS (je parle de ce que télécharge vraiment le navigateur : des fichiers gzippés, pas une CSS "brute" ou celle avec les commentaires), 1 seul fichier anéfé. Il y a des exceptions (75 ko de CSS gzippé sur un site déjà optimisé dont un "thème" couleur => 3 fichiers de 25 ko mais c'est un expert en webperf qui a décidé ça après avoir mesuré, comparé, etc)

Si certaines pages sont les seules à avoir certaines règles (on peut pas faire plus spécifique), oui c'est une bonne idée de laisser le code dans un élément style dans la page.
L'écueil est la maintenance et la "découvrabilité" ("discoverabilty") : il faut savoir que telles pages ont des CSS qui leur sont propres donc documenter.

osiris67 a écrit :
Maintenant, mon style-gen.css avec les media queries, et les commentaires pour que je m'y retrouve, doit faire 2000 lignes (…)

Une note plus générale : quand on fait ça toute la journée, professionnellement a priori, les outils à notre disposition permettent de travailler de façon complètement différente (enfin on avait certains besoins et les outils ont été développés pour permettre ça).
C'est node+npm / gulp / node-sass et Autoprefixer, csso / uglify pour le JS, etc => bretzel
Cela permet de séparer les sources : les CSS/Sass découpés en multiple fichiers dans une arborescence facilitant grandement la maintenance du résultat qui peut être une unique CSS optimisée.
On gagne le découpage par composants et type de règle (layout, composants, base, print, etc), des variables avec un préprocesseur (Sass, LESS et cie), l'imbrication (ne pas en abuser mais justement pour les MQ c'est pratique), ne plus se préoccuper des préfixes (Autoprefixer + browserslist).
Sass permet soit d'écrire une at-règle @media dans un sélecteur (il prend le tout et à la compilation, @media contient le sélecteur pour avoir du CSS valide), soit via une mixin de coller en fin de fichier les @media qui auront été écrits au fur et à mesure. Je pensais que cette dernière manière était à privilégier mais après avoir vu 400 @media écrites "comme ça" au fur et à mesure / dispersées et que ça n'avait aucune espèce d'importance ou d'influence (à part sur la lisibilité de la CSS résultante mais on lit pas ça donc osef)(merci gzip encore une fois), j'ai arrêté de chercher à obtenir ça.
L'inconvénient de tous ces beaux outils, c'est qu'il faut savoir les installer et apprendre à s'en servir. Pour un·e intégrateur·trice, ce sont des centaines d'heures de gagnées mais pour un petit projet ou un amateur, ça n'en vaut peut-être pas la peine mais on passe à côté de quelque chose quand même
Modifié par Felipe (04 Sep 2017 - 12:02)