CSS @import: Плюсы и минусы
@supports и медиа запросов. @import vs <link>Использование @import обычно считается плохой практикой. Несмотря на определённые соображения, связанные с производительностью, @import предоставляет полезную функциональность, которой не обладает <link>.
Каскадные слои
Вы можете @import все стили CSS-файла в каскадный слой.
@import 'utility-classes.css' layer(utilities);Объявления @import должны быть включены в верхнюю часть таблицы стилей, но объявление @layer может располагаться перед импортом:
@layer base, components, utilities;
@import 'base.css' layer(base);
@import 'components.css' layer(components);
@import 'utility-classes.css' layer(utilities);Запросы возможностей/@supports
В @import можно включить условие supports(). Если необходимо, применить таблицу стилей при условии, что некая новомодная функция CSS поддерживается, то это чистый способ добиться этого.
@import '/background-clip.css' supports(background-clip: border-area);
@import '/field-sizing.css' supports(field-sizing: content);Также можно импортировать таблицу стилей, если определённая функция CSS не поддерживается:
@import '/fallback1.css' supports(not (animation-timeline: scroll()));
@import '/fallback2.css' supports(not (top: anchor(top)));К сожалению, в Safari и Firefox запрашиваются все таблицы стилей, но применяются только удовлетворяющие условию supports. Chrome более эффективен: запрашиваются только те таблицы стилей, которые удовлетворяют условию supports.
Условие supports для @import было добавлено в Safari 17.5, Chrome 122 и Firefox 115.
Медиа-запросы
Если разделить стили на отдельные файлы для мобильных и десктопных устройств или, например, для светлого и тёмного режима, то можно условно применить нужную таблицу стилей:
@import "/dark-styles.css" (prefers-color-scheme: dark);
@import "/light-styles.css" (prefers-color-scheme: light);Хотя только соответствующие таблицы стилей будут применены к документу, все .css файлы будут загружены. Мало того, что выполняются запросы на неиспользуемые файлы CSS, эти запросы имеют высокий приоритет. В этом плане лучше использовать элемент <link>, поскольку таблицы стилей, не соответствующие медиа-запросу, загружаются с меньшим приоритетом.
Всё вышеперечисленное
Можно использовать все эти функции вместе:
@import "/foo.css"
layer(overrides)
supports(color: lch(29.2345% 44.2 27))
(max-width: 700px);@import vs <link>
И <link>, и @import поддерживают медиа-запросы. Однако у <link> нет возможности указать условие supports и назначить таблицу стилей для каскадного слоя. Возможно, со временем мы получим атрибут layer и атрибут supports для элемента <link>, но пока это не поддерживается ни в одном браузере.
Производительность
В некоторых статьях @import обвиняют в том, что он плохо влияет на производительность, но это отчасти зависит как его использовать. Рассмотрим пример:
<link href="/a.css" rel="stylesheet" />Если таблица стилей a.css содержит оператор @import, будет создан водопад:
@import "/b.css";Ссылка на один CSS-файл внутри другого приводит к тому, что файлы загружаются последовательно — a.css должен быть загружен до того, как будет запрошен b.css. Следует избегать использования @import таким образом.
Следующий код в <head> HTML-документа позволяет избежать этой проблемы:
<style>
@import "/a.css";
@import "/b.css";
</style>Даже по сравнению с этим улучшенным подходом, есть основания отдать предпочтение тегу <link>, а не @import, по крайней мере, при использовании медиа-запросов:
- В Safari и Chrome при использовании медиа-запросов как части оператора
@importсканер предзагрузки не подхватывает таблицы стилей. - При использовании медиа-запросов элемент
<link>загружает несоответствующие таблицы стилей с низким приоритетом, а@importзагружает их с высоким приоритетом и блокирует рендеринг.