Organisation des requêtes et des CSS

Plusieurs fichiers CSS distincts, ou un seul qui répartit les rôles ?

Lors du développement et de la mise en place du site, il peut être plus simple et souple d’utiliser diverses feuilles de styles CSS, une par environnement. Par contre en production, utiliser plusieurs fichiers nécessite forcément un recours à plusieurs requêtes client-serveur, ce qui, en attendant la démocratisation de HTTP2, n’est pas toujours gage d’optimisation. En ce sens, il peut alors être plus facile de regrouper l’ensemble des déclarations sur une seule feuille de style.

Diverses approches sont alors possibles

• Regrouper toutes les déclarations au sein d’une page CSS unique et les départager par des requêtes distinctes
• Continuer à écrire diverses feuilles de styles en s’appuyant sur tâche (grunt ou gulp) pour concaténer et compacter sur un seul et unique fichier au moment du transfert FTP
• Utiliser un préprocesseurs de type SASS, ou Less, qui permettra de mettre en place une arborescence basée sur des fichiers _partials.ext, et compacter sur un seul et unique fichier final en employant des @imports.

La syntaxe des media queries qui permet de directement écrire la requête au sein même de la feuille de style emploie la déclaration d’un bloc @media englobant.

Par exemple, au lieu d’employer

<link rel="stylesheet" 
media="handheld and  
       (min-width: 200px) and 
       (max-width :321px) and 
       (orientation:portrait)" 
href="styles.css" type="text/css" />

alors la requête pourrait s’écrire directement dans la feuille de style de la manière suivante :

@media handheld and (min-width: 200px) and (max-width :321px) and (orientation:portrait) {
  .classe {
    //declarations
  }
}

Pour répartir les divers types d’affichage, il est bon d’user d’une requête par type de device, mais également d’optimiser au maximum, en mutualisant les déclarations communes. Toujours penser à une modularité objet, voir en cela une approche plus orientée objet pour nos CSS.