Какви капани могат да възникнат при оптимизация на…

Прекомерна употреба на сложни селектори: Селектори като > * или :nth-child могат да бъдат бавни за браузъра при търсене на елементи.
Използване на @import: @import причинява допълнителни HTTP заявки и блокира паралелното зареждане на стилове, което забавя рендирането на страницата.
Несъвместяване на съкратени свойства: Определянето на няколко свойства (например margin-top, margin-bottom и т.н.) вместо съкратения margin може да увеличи размера на файла и времето за парсинг.
Голям брой правила !important: Използването на !important нарушава каскадността и усложнява отстраняването на грешки и поддръжката на стиловете.
Използване на излишен CSS: Стилове, които не се прилагат към никакви елементи на страницата, увеличават размера на файла.
Несъвършена оптимизация на изображения: Изображенията, използвани в CSS (например като фон), трябва да бъдат компресирани и да имат правилните формати.
Липса на минификация и компресия: CSS файловете трябва да бъдат минифицирани и компресирани (например Gzip) за намаляване на размера и ускоряване на зареждането.
Голям брой CSS файлове: Множество малки CSS файла увеличават броя на HTTP заявките.
Блокиране на рендиране: CSS по подразбиране е ресурс, който блокира рендирането. Неправилната организация на зареждането на CSS (например, критичните стилове в началото на файла) може да забави рендирането.
Използване на нестандартни шрифтове без оптимизация: Свързването на голям брой шрифтове или шрифтове без оптимизация (например без поднабори) може да забави зареждането на страницата.
Големи DOM дървета: Дори с оптимизиран CSS, сложните и дълбоки DOM дървета могат да забавят прилагането на стилове и повторното рисуване.
Анимации с CSS, които предизвикват чести преизчисления на стилове и макети: Използването на свойства като left/top вместо transform може да доведе до по-скъпи операции за браузъра.
Неправилно използване на медийни заявки: Твърде много или неоптимизирани медийни заявки могат да увеличат времето за обработка на стиловете.
Липса на анализ на производителността: Без използване на инструменти за анализ на производителността (например 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;

Какви капани могат да възникнат при оптимизация на производителността на CSS?