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

Исторический контекст: как появился @import?

Правило @import появилось ещё в спецификации CSS1, опубликованной в 1996 году. Тогда веб был совсем другим: сайты создавались в основном для отображения текста, а стилизация была примитивной. В те времена CSS-файлы были небольшими, но уже тогда разработчики понимали, что разделение стилей на несколько файлов упрощает работу. @import стал ответом на эту задачу, позволяя подключать один CSS-файл к другому, как библиотеку к программе.

С годами веб усложнился, появились фреймворки, препроцессоры (Sass, Less) и сборщики (Webpack, Vite), но @import остался в строю. Он не так популярен, как в 90-х, из-за некоторых ограничений (о них позже), но всё ещё используется для организации стилей в проектах, особенно когда нужно подключить сторонние библиотеки или разделить стили по модулям.

Как работает @import?

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

  • @import url('имя_файла.css'); — стандартная форма с использованием url().
  • @import 'имя_файла.css'; — упрощённая форма без url().

Пример использования:


@import url('reset.css');

h1 {
  color: navy;
  font-family: Arial, sans-serif;
}

В этом примере мы сначала импортируем файл reset.css, который, например, сбрасывает стандартные стили браузера, а затем добавляем свои стили для заголовка. Важно помнить: если вы поместите @import после других правил, браузер просто проигнорирует его.

Кроме того, @import поддерживает медиа-запросы, что позволяет загружать стили в зависимости от условий, например, размера экрана:


@import url('mobile.css') screen and (max-width: 600px);

Это удобно для адаптивной вёрстки, когда вы хотите подключать разные стили для мобильных и десктопных устройств.

Практический пример для новичков

Допустим, у вас есть проект с двумя CSS-файлами: base.css для базовых стилей и components.css для стилей отдельных компонентов. Вы можете подключить их в основной файл styles.css так:


@import 'base.css';
@import 'components.css';

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

Содержимое base.css может выглядеть так:


/* base.css */
* {
  box-sizing: border-box;
}

А components.css:


/* components.css */
.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
}

Теперь ваш styles.css объединяет все стили в одном месте, но файлы остаются разделёнными, что упрощает их поддержку. Это особенно полезно в больших проектах, где стили могут быть разбиты на десятки файлов.

Совместимость с браузерами

На август 2025 года правило @import имеет статус Baseline: Widely Available и поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge) с января 2018 года, согласно данным MDN. Оно работает даже в старых браузерах, таких как Internet Explorer 11, что делает его надёжным инструментом для любых проектов. Медиа-запросы в @import также широко поддерживаются, начиная с CSS2.1 (2000-е годы).

Когда стоит использовать @import?

Правило @import идеально подходит для:

  • Разделения стилей на модули (например, reset.css, typography.css, components.css).
  • Подключения сторонних библиотек, таких как Normalize.css или шрифты Google Fonts.
  • Организации стилей в небольших проектах, где не используются сборщики или препроцессоры.

Но есть и нюансы. Например, @import может замедлить загрузку страницы, так как браузер загружает импортируемые файлы последовательно, а не параллельно. Это особенно заметно, если у вас много импортов. Для сравнения, подключение CSS через тег <link> в HTML обычно быстрее, так как браузер может загружать файлы параллельно.

Альтернативы и современный подход

В 2025 году @import не является единственным способом организовать стили. Вот несколько альтернатив:

  • Тег <link> в HTML: Подключение CSS-файлов через <link rel="stylesheet" href="styles.css"> быстрее, так как браузер загружает файлы параллельно.
  • Препроцессоры CSS (Sass, Less): В Sass, например, используется директива @import, но она компилируется в один файл, устраняя проблему производительности.
  • Сборщики (Webpack, Vite): Современные сборщики позволяют импортировать CSS как модули в JavaScript, что даёт больше контроля над загрузкой и минимизацией.

Пример подключения через <link>:


<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">

Если вы используете Sass, то структура может быть такой:


// main.scss
@import 'reset';
@import 'components';

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

После компиляции Sass объединит все файлы в один, что устраняет проблему последовательной загрузки.

Заключение

Правило @import — это простой и надёжный способ организовать CSS-код, особенно для новичков, которые только начинают разбираться в веб-разработке. Оно позволяет разделять стили на модули, подключать сторонние библиотеки и даже работать с медиа-запросами. Однако в больших проектах стоит учитывать его влияние на производительность и, возможно, предпочесть тег <link> или современные инструменты, такие как Sass или Webpack.

Попробуйте поэкспериментировать с @import в небольшом проекте: создайте несколько CSS-файлов, подключите их и посмотрите, как это упрощает работу. Веб-разработка — это про порядок и творчество, и такие инструменты, как @import, помогают вам двигаться вперёд!