115 Pratiques d'écoconception d'applications à architecture web, et plus...
Source CNUMR [BP_045_fr]

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

Identifiants

GreenITV2V3V4
343245

Catégories

Cycle de vieTiersResponsable
3. Réalisation (fabrication / développement)Utilisateur/TerminalArchitecte Logiciel/Développeur

Indications

Degré de prioritéMise en oeuvreImpact écologique
342
Ressources Economisées
Processeur

Description

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 (voir la bonne pratique n° 45).

Exemple

Préférer l’écriture :

<style>
    .in-error { color: red;
        font-weight: bold;
    }
</style>
<script>
    $el.bind('error', function () {
        $el.addClass('in-error');
    });
    $el.bind('running'), function () {
        $el.removeClass('in-error');
    };
</script>

Principe de validation

Le nombre …est inférieur ou égal à
de déclarations CSS pouvant être regroupées en une seule (margin, padding, …), et n’utilisant pas la version courte0