Что такое @import CSS?

Это метод импорта одного файла CSS из другого файла CSS. Похоже на это...

@import url("style.css")

Почему бы не использовать его?

Метод @import для извлечения файлов CSS создает некоторые проблемы, влияющие на скорость вашей страницы. Самая большая проблема заключается в том, что файлы загружаются последовательно (один должен ждать другого), а не параллельно (одновременно). Это приводит к трате времени и обращений туда и обратно и замедляет загрузку вашей веб-страницы.

Как избежать импорта css @

Просмотрите свои файлы HTML и CSS и найдите вызовы @import.
Опять же, они выглядят так и обычно находятся в верхней части файла.

@import url("style.css")

Вместо того, чтобы вызывать этот css-файл с помощью метода импорта, лучше просто сохранить этот дополнительный css только в одном файле (скопируйте и вставьте импортированный css в исходный css-файл). Если по какой-то причине вы не можете этого сделать, включите эти css-файлы из html-файла, используя следующий код...

<link rel="style.css" href="style.css" type="text/css">

Не забудьте заменить «style.css» на местоположение и имя вашего файла CSS.

Проверьте все ваши файлы CSS

Многие веб-сайты имеют несколько файлов CSS (попробуйте объединить эти файлы CSS). Если у вас есть более одного файла CSS, проверьте каждый файл на наличие импорта.

Если файл CSS вызывает другой файл CSS с помощью метода @import, это особенно плохо сказывается на скорости страницы. Это добавляет дополнительные шаги для браузера, чтобы загрузить вашу веб-страницу, заставляя браузер загружать, анализировать, а затем выходить и получать следующий файл CSS, прежде чем он начнет отображать вашу страницу.
Этого можно избежать, используя метод ссылки, показанный выше.

Лучше вообще не использовать @import