Quali insidie possono verificarsi durante…

Uso eccessivo di selettori complessi: Selettori come > * o :nth-child possono essere lenti per il browser durante la ricerca degli elementi.
Utilizzo di @import: @import genera richieste HTTP aggiuntive e blocca il caricamento parallelo degli stili, rallentando il rendering della pagina.
Non usare proprietà abbreviate: Definire più proprietà (ad esempio, margin-top, margin-bottom, ecc.) invece di margin può aumentare la dimensione del file e il tempo di parsing.
Gran numero di regole !important: L'uso di !important interrompe la cascata e rende più difficile il debug e la manutenzione degli stili.
Uso di CSS ridondante: Avere stili che non si applicano a nessun elemento sulla pagina aumenta la dimensione del file.
Immagini non ottimizzate: Le immagini usate nel CSS (ad esempio, come sfondo) devono essere compresse e avere i formati corretti.
Mancanza di minificazione e compressione: I file CSS devono essere minificati e compressi (ad esempio, Gzip) per ridurne la dimensione e accelerare il caricamento.
Gran numero di file CSS: Molti file CSS piccoli aumentano il numero di richieste HTTP.
Blocco del rendering: Il CSS blocca di default il rendering. Un'organizzazione errata del caricamento CSS (ad esempio, stili non critici all'inizio del file) può ritardare il rendering.
Uso di font non standard senza ottimizzazione: Caricare molti font o font non ottimizzati (ad esempio, senza sottoinsiemi) può rallentare il caricamento della pagina.
Grandi alberi DOM: Anche con CSS ottimizzato, alberi DOM complessi e profondi possono rallentare l'applicazione degli stili e il ridisegno.
Animazioni CSS che causano ricalcoli frequenti di stili e layout: L'uso di proprietà come left/top invece di transform può essere più costoso per il browser.
Uso scorretto delle media query: Troppe o non ottimizzate possono aumentare il tempo di elaborazione degli stili.
Mancanza di analisi delle prestazioni: Senza strumenti come la scheda Performance di Chrome DevTools, è difficile individuare i colli di bottiglia.

/* Esempio di selettore inefficiente */
body > * {
    margin: 0;
}

/* Esempio di selettore più efficiente */
.container {
    margin: 0;
}

/* Evitare di usare @import */
@import url('other.css');

/* È preferibile usare <link> in HTML */

/* Invece di */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Usa la proprietà abbreviata */
margin: 10px 20px;

Quali insidie possono verificarsi durante l'ottimizzazione delle prestazioni CSS?