Ի՞նչ թակարդներ կարող են առաջանալ CSS-ի կատարողականությունը օպտիմալացնելիս։

• Ավելի շատ օգտագործում է բարդ սելեկտորներ: Սելեկտորներ, ինչպիսիք են > * կամ :nth-child, կարող են լինել դանդաղ բրաուզերի համար՝ որոնելով տարրեր:
• Օգտագործում @import: @import առաջացնում է լրացուցիչ HTTP հարցումներ և խանգարում է ստիլների հոսքին, ինչը դանդաղեցնում է էջի արտապատկերումը:
• Չօգտագործում կրճատված հատկություններ: Մի քանի հատկությունների սահմանում (օրինակ, margin-top, margin-bottom և այլն) փոխարենը կրճատ margin-ի, կարող է մեծացնել ֆայլի չափը և վերլուծության ժամանակը:
• Ամենամեծ !important կանոններ: !important-ի օգտագործումը խանգարում է կասկադային կարգին և բարդացնում է ստիլների թեստավորումը և պահպանությունը:
• Անպատասխան CSS օգտագործում: CSS-ով չօգտագործվող ոճերը մեծացնում են ֆայլի չափը:
• Անբավարար օպտիմիզացված պատկերներ: CSS-ով օգտագործվող պատկերները (օրինակ, ֆոնային) պետք է լինեն սեղմված և ունենան ճիշտ ձևաչափեր:
• Մինიფիկացիայի և սեղմման բացակայություն: CSS ֆայլերը պետք է լինեն մինიფիկացված և սեղմված (օրինակ, Gzip)՝ չափը նվազեցնելու և բեռնումը արագացնելու համար:
• Ամենամեծ CSS ֆայլեր: Փոքր CSS ֆայլերի մեծ քանակը ավելացնում է HTTP հարցումների քանակը:
• Բլոկավորում ռենդերինգը: CSS-ը ըստ նախնական կարգի բլոկավորում է ռենդերինգը։ Անպատասխան կազմակերպությունը կարող է ուշացնել ռենդերինգը:
• Անհրաժեշտ չհամապատասխանող ֆոնտեր: Մեծ քանակությամբ ֆոնտեր կամ ֆոնտեր առանց օպտիմիզացիայի կարող են դանդաղեցնել էջի բեռնումը:
• Մեծ DOM ծառեր: Ավելին, բարդ և խորը DOM ծառերը կարող են դանդաղեցնել ոճերի կիրառումը և վերարտադրությունը:
• CSS-ով անիմացիաներ, որոնք առաջացնում են հաճախակի վերամշակումներ: Օգտագործեք transform-ը left/top-ի փոխարեն, քանի որ դա ավելի արդյունավետ է:
• Մեդիա հարցումների սխալ օգտագործում: Շատ կամ անօպտիմիզացված մեդիա հարցումները կարող են ավելացնել ստիլների մշակման ժամանակը:
• Աշխատանքի անբավարար վերլուծություն: Անհրաժեշտ է օգտագործել գործիքներ՝ կատարողականության վերլուծության համար (օրինակ, Chrome DevTools Performance tab), որպեսզի հայտնաբերել բարդությունները:

/* Անարդյունավետ սելեկտորի օրինակ */
body > * {
    margin: 0;
}

/* Ավելի արդյունավետ սելեկտոր */
.container {
    margin: 0;
}

/* Պետք է խուսափել @import- ի օգտագործումից */
@import url('other.css');

/* Ավելի լավ է օգտագործել <link> HTML-ում */

/* Փոխարենը */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Օգտագործեք կրճատված հատկություն */
margin: 10px 20px;