Kokios spąstai gali iškilti optimizuojant CSS našumą…

Per didelį sudėtingų selektorių naudojimą: Selektoriai, tokie kaip > * arba :nth-child, gali būti lėti naršyklei ieškant elementų.
Naudojant @import: @import sukelia papildomus HTTP užklausimus ir blokuoja paralelį stilių įkėlimą, todėl lėtina puslapio atvaizdavimą.
Naudojant sutrumpintas savybes: Nustatant kelias savybes (pvz., margin-top, margin-bottom ir kt.) vietoje sutrumpinto margin, gali padidėti failo dydis ir analizės laikas.
Daug !important taisyklių: !important naudojimas pažeidžia stiliaus paveldėjimą ir apsunkina stilių derinimą bei palaikymą.
Neribotas CSS naudojimas: Stiliai, kurie nėra taikomi jokiems elementams puslapyje, padidina failo dydį.
Nepataisyti vaizdai: CSS naudoti vaizdai (pvz., fonas) turėtų būti suspausti ir turėti tinkamus formatus.
Trūksta minifikacijos ir suspaudimo: CSS failai turėtų būti minifikuoti ir suspausti (pvz., Gzip), kad sumažintų dydį ir pagreitintų įkėlimą.
Daug CSS failų: Daug mažų CSS failų padidina HTTP užklausų skaičių.
Renderavimo blokavimas: CSS pagal numatytuosius nustatymus yra išteklius, blokuojantis renderavimą. Netinkama CSS įkėlimo organizacija gali uždelsti atvaizdavimą.
Naudojant nestandartinius šriftus be optimizacijos: Daug šriftų ar be optimizacijos (pvz., be subrinkinimo) gali sulėtinti puslapio įkėlimą.
Dideli DOM medžiai: Net ir su optimizuotu CSS, sudėtingi ir gilūs DOM medžiai gali sulėtinti stilių taikymą ir atnaujinimą.
CSS animacijos, kurios sukelia dažnus stiliaus ir maketo peržiūrėjimus: Naudokite transform vietoje left/top, nes tai yra efektyviau.
Netinkamas media užklausų naudojimas: Per daug arba neefektyvių media užklausų gali padidinti stiliaus apdorojimo laiką.
Naudojant neefektyvią našumo analizę: Be įrankių, tokių kaip Chrome DevTools Performance, sunku nustatyti našumo problemas.

/* Nepasiekiamas selektorius pavyzdys */
body > * {
    margin: 0;
}

/* Efektyvesnis selektorius */
.container {
    margin: 0;
}

/* Venkite @import naudojimo */
@import url('other.css');

/* Naudokite <link> HTML */

/* Vietoje to */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Naudokite sutrumpintą savybę */
margin: 10px 20px;

Kokios spąstai gali iškilti optimizuojant CSS našumą?