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

    Modifier plusieurs propriétés CSS en 1 seule fois

    Ce que dit le référentiel

    Pour limiter le nombre de repaint/reflow, il est conseillé de ne pas modifier des propriétés une à une. Préférer l’ajout/la suppression de classes CSS, ce qui permet de modifier en une seule fois plusieurs propriétés, tout en ne générant qu’un repaint/reflow.

    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

    Le Virtual DOM de React optimise les manipulations et mises à jour en batchant les modifications avant de les appliquer au réel DOM. Cela permet de limiter les repaints et reflows, car les changements sont effectués de manière groupée.

    Concrètement, en utilisant le Virtual DOM avec React, nous pouvons modifier plusieurs propriétés CSS simultanément par l'application d'une unique classe, réduisant ainsi l'impact sur la performance et l'empreinte environnementale du site.

    Règle de validation

    Le nombre de déclarations CSS pouvant être regroupées en une seule (margin, padding, ...), et n'utilisant pas la version courte doit être inférieur ou égal à 0

    Ressources économisées

    Processeur
    Bonne pratique précédente
    Précédent
    Bonne pratique suivante
    Suivant