Welke valkuilen kunnen ontstaan bij het optimaliseren…

Overmatig gebruik van complexe selectors: Selectors zoals > * of :nth-child kunnen traag zijn voor de browser bij het zoeken naar elementen.
Gebruik van @import: @import veroorzaakt extra HTTP-verzoeken en blokkeert het parallel laden van stijlen, wat de pagina-rendering vertraagt.
Gebruik geen verkorte eigenschappen: Het definiëren van meerdere eigenschappen (bijvoorbeeld margin-top, margin-bottom, enz.) in plaats van de verkorte margin kan de bestandsgrootte en parsing-tijd vergroten.
Grote hoeveelheid !important regels: Het gebruik van !important verstoort de cascade en maakt het debuggen en onderhouden van stijlen moeilijker.
Gebruik van redundante CSS: Stijlen die niet op geen enkel element op de pagina worden toegepast, vergroten de bestandsgrootte.
Niet-geoptimaliseerde afbeeldingen: Afbeeldingen die in CSS worden gebruikt (bijvoorbeeld in achtergronden) moeten worden gecomprimeerd en het juiste formaat hebben.
Ontbreken van minificatie en compressie: CSS-bestanden moeten worden geminificeerd en gecomprimeerd (bijvoorbeeld Gzip) om de grootte te verminderen en het laden te versnellen.
Veel kleine CSS-bestanden: Veel kleine CSS-bestanden vergroten het aantal HTTP-verzoeken.
Render-blokkering: CSS blokkeert standaard de rendering. Onjuiste organisatie van CSS-laden (bijvoorbeeld niet-kritische stijlen aan het begin van het bestand) kan de rendering vertragen.
Gebruik van niet-standaard lettertypen zonder optimalisatie: Het laden van veel lettertypen of niet-geoptimaliseerde lettertypen (bijvoorbeeld zonder subsets) kan de pagina-lading vertragen.
Grote DOM-bomen: Zelfs met geoptimaliseerde CSS kunnen complexe en diepe DOM-bomen het toepassen van stijlen en het opnieuw tekenen vertragen.
CSS-animaties die frequente herberekeningen van stijlen en lay-outs veroorzaken: Het gebruik van eigenschappen zoals left/top in plaats van transform kan voor de browser kostbaarder zijn.
Onjuist gebruik van media queries: Te veel of niet-geoptimaliseerde media queries kunnen de verwerkingstijd van stijlen verhogen.
Gebrek aan prestatie-analyse: Zonder tools zoals Chrome DevTools Performance-tab is het moeilijk om knelpunten te identificeren.

/* Voorbeeld van inefficiënte selector */
body > * {
    margin: 0;
}

/* Meer efficiënte selector */
.container {
    margin: 0;
}

/* Vermijd het gebruik van @import */
@import url('other.css');

/* Gebruik liever <link> in HTML */

/* In plaats daarvan */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Gebruik de verkorte eigenschap */
margin: 10px 20px;

Welke valkuilen kunnen ontstaan bij het optimaliseren van de CSS-prestaties?