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

Данная публикация представляет собой перевод статьи «CSS Import» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню