AccueilClientsExpertisesBlogOpen SourceContact

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
18 avenue Parmentier
75011 Paris
+33 1 43 57 39 11
hello@premieroctet.com

Suivez nos aventures

GitHub
X (Twitter)
Flux RSS

Naviguez à vue