Nello script precedente abbiamo visto come, all'interno di una pagina web, la creazione di componenti a video sia soggetta a tre differenti fasi: Reflow, Repaint, Composition. Di cui la prima, il reflow, è molto impattante in termini di tempo e risorse per essere portata a compimento.

Ci sono però alcuni accorgimenti che possiamo applicare per migliorare il tempo di applicazione degli stili, o addirittura quasi annullarlo.

Per il primo step è richiesto l'utilizzo del nostro buonsenso: evitiamo i selettori CSS complessi. La modalità di scrittura di un selettore ci permette di essere sia generici che estremamente puntuali rispetto all'elemento a cui applicare lo stile. Ma va considerato che più la regola è precisa, più il rendering della pagina richiederà tempo, dato che verranno fatte molte più verifiche.

/* non ottimizato */
html body div.container ul li button:hover {
  color: red;
}

/* ottimizato */
button:hover {
  color: red;
}

Se l'effetto di hover su un bottone riulta troppo generico, è comunque consigliabile applicare una classe al bottone a cui applicare lo stile, rispetto al mantenere la catena di CSS.

/* ottimizato con classe*/
.btn-primary:hover {
  color: red;
}

Anche per questo caso dobbiamo però trovare un limite adeguato, in modo da mantenere un buon compromesso tra utilizzo specifico e modularità, dato che, anche troppe classi applicate ad un solo elemento, richiedono molto calcolo da parte del browser per capire come verrà disegnato.

<!-- non ottimizzato -->
<button class="btn-red btn-hover-red btn-border-black btn-mouse-pointer btn-active-orange btn-font-weigth-bold"></button>

<!-- ottimizzato con una classe che incorpora tutti gli stili -->
<button class="btn-danger"></button>