CSS @Import
Правило @import указывает CSS импортировать внешнюю таблицу стилей в другую. Это правило также можно использовать с медиа-запросами для импорта CSS на основе типа устройства.
Объявление @import должно располагаться в верхней части файла CSS.
@import "style.css"; /* используется строка */
@import url("rebrand.css"); /* используется URL */
@import "print.css" print; /* используется медиа-запрос */Правило @import – это отличный способ организации объемного кода CSS.
Преимущества CSS @import
Использование @import не только экономит время разработчика, но и ограждает его от ошибок. Вместо копирования и вставки CSS это правило импортирует существующие правила. Его также можно использовать для разделения используемых стилей на отдельные таблицы. Например:
@import "buttons.css";
@import "links.css";
@import "forms.css";Остальные преимущества @import:
- Организация CSS сайта по разным таблицам стилей.
- Возможность быстрого подключения большого количества CSS-файлов.
Недостатки CSS @import
Применение @import может увеличивать время загрузки веб-страницы, если не используется в сборке. Когда веб-страница загружается с помощью команды @import, она должна прочитать и импортировать файл CSS, указанный в правиле. После чего применить его к текущей веб-странице. Эта задержка некритична даже для крупных сайтов. Но может негативно отразится на позиции сайта в поисковой выдаче.
Альтернативы CSS @import
Есть несколько альтернатив CSS правилу @import:
- Использование тега <link> для связывания используемых CSS-таблиц в заголовке HTML-файла позволяет загружать, а не подключать их. Благодаря этому не увеличивается время загрузки.
- Создание отдельных таблиц стилей для каждой страницы – это сложно и неэффективно.
- Копирование и вставка кода – малоэффективно при использовании на больших по размеру сайтах.
Стоит ли использовать CSS @import?
У правила @import больше преимуществ, чем недостатков. Его использование может увеличить время загрузки сайта, но не его главной страницы, куда попадает большая часть новых пользователей.