CSS @Import

0 ∞

Правило @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 больше преимуществ, чем недостатков. Его использование может увеличить время загрузки сайта, но не его главной страницы, куда попадает большая часть новых пользователей.