Как оптимизировать CSS стили

1. **Минификация** – удаление пробелов, комментариев и сокращение кода: ```css /* До */ .header { color: #ffffff; } /* После */ .header{color:#fff} ``` 2. **Использование CSS-препроцессоров** (Sass, Less) для модульности и переменных. 3. **Уменьшение вложенности** (особенно в BEM/Sass) – избегаем глубоких селекторов: ```css /* Плохо */ .block__element--modifier span { ... } /* Лучше */ .block__text { ... } ``` 4. **Critical CSS** – встраивание ключевых стилей прямо в `` для ускорения первой отрисовки. 5. **Удаление неиспользуемого кода** (PurgeCSS, UnCSS). 6. **Оптимизация анимаций** – используем `transform` и `opacity` вместо `top/left`: ```css /* Хорошо */ .box { transform: translateX(100px); } /* Плохо */ .box { left: 100px; } ``` 7. **Сжатие и кэширование** на сервере (gzip, Brotli).