AccueilClients

Applications et sites

  • Application métiersIntranet, back-office...
  • Applications mobilesAndroid & iOS
  • Sites InternetSites marketings et vitrines
  • Expertises techniques

  • React
  • Expo / React Native
  • Next.js
  • Node.js
  • Directus
  • TypeScript
  • Open SourceBlogContactEstimer

    Bonne pratique

    Limiter le nombre de CSS

    Ce que dit le référentiel

    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.

    Plus d'informations sur collectif.greenit.fr et ecoconceptionweb.com.

    Notre avis

    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

    Réseau
    Requêtes
    Bonne pratique précédente
    Précédent
    Bonne pratique suivante
    Suivant