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

Неоптимизированные селекторы. Браузер парсит CSS справа налево, поэтому сложные и избыточные селекторы, особенно с универсальным селектором * или селектором потомка >, замедляют вычисление стилей.

Большое количество правил @import в CSS. Они блокируют параллельную загрузку стилей, что задерживает рендеринг страницы.

Использование сложных или ресурсоемких CSS-свойств, таких как тени (box-shadow, text-shadow) или размытие (filter: blur), при анимации или большом количестве элементов.

Неразборчивый или избыточный CSS, написанный без учета специфичности и наследования, приводящий к перезаписи правил и увеличению размера файла.

Неиспользуемый CSS ("dead CSS") — правила, которые не применяются к текущей разметке. Увеличивает размер файла и время парсинга.

Фоновые изображения большого размера или в неподходящем формате, которые загружаются медленно и блокируют рендеринг.

Использование фреймворков, которые добавляют много неиспользуемых стилей.

Плохо спроектированный макет (layout) с избыточным количеством элементов или глубокой вложенностью, что увеличивает время перерисовки (repaint) и перекомпоновки (reflow).

Неправильное использование will-change — может привести к излишнему потреблению памяти GPU или ненужному созданию слоев.

Отсутствие сжатия (Gzip или Brotli) при передаче CSS-файлов с сервера.