Bonne pratique
Limiter le nombre de CSS pour ne pas multiplier les requêtes HTTP et pour simplifier le rendu côté navigateur. Utiliser une feuille de style commune pour tous les éléments communs, quel que soit l'affichage, et un fichier par résolution cible ou media querie.
Attention, intégrer ces fichiers directement dans le code HTML et NON PAS avec des directives @import dans les fichiers CSS eux-mêmes. En découpant de la sorte, le terminal de l'utilisateur choisira ce qu'il lui correspond et dépriorisera le chargement des fichiers dont il a n'a pas besoin.
Le cas échéant, des fichiers CSS pour certains composants peuvent être chargés en fonction du contexte.
Le "Référentiel d'écoconception web (REW)" est publié par GreenIT.fr dans le cadre des travaux du Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution.
La limitation du nombre de CSS peut être efficacement gérée en utilisant Tailwind CSS. Son approche utility-first permet d'incorporer uniquement les classes nécessaires directement dans le markup HTML. Cette méthode réduit la taille des fichiers CSS, limitant ainsi le nombre de requêtes HTTP et optimisant le rendu.
Le mode JIT (Just-In-Time) de Tailwind génère les styles à la volée, vous assurant que seuls les styles utilisés sont inclus dans le fichier CSS final. Cela permet de maintenir une feuille de style légère et d'éviter les surcharges inutiles, respectant les bonnes pratiques en matière de performance web.
Règle de validation
Le nombre de fichiers CSS doit être inférieur ou égal à 10
Ressources économisées