Есть ли import в CSS?

Есть ли import в CSS?

Да, в CSS существует механизм импорта стилей с помощью @import правила. Это позволяет загружать файлы CSS в другие файлы CSS и организовывать стили модульно. Однако это не совсем то же самое, что import в JavaScript.

Синтаксис @import

Существует несколько способов использования @import в CSS:

/* Способ 1: URL в кавычках */
@import url('styles/variables.css');

/* Способ 2: URL без url() функции */
@import 'styles/variables.css';

/* Способ 3: С относительным путём */
@import './components/button.css';

/* Способ 4: Абсолютный URL */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700');

/* Способ 5: С медиа-запросом */
@import url('mobile.css') screen and (max-width: 768px);

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

/* main.css */
@import 'variables.css';
@import 'reset.css';
@import 'typography.css';
@import 'components/button.css';
@import 'components/card.css';
@import 'layouts/header.css';

body {
  font-family: var(--font-family);
  color: var(--text-color);
}

/* variables.css */
:root {
  --primary-color: #007bff;
  --text-color: #333;
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Важные особенности @import

1. Порядок выполнения

• @import должен находиться в начале файла CSS
• Все @import директивы обрабатываются перед остальными правилами
• Импортированные стили применяются в порядке их объявления

/* ✅ Правильно */
@import 'variables.css';
@import 'reset.css';

body {
  background-color: var(--bg-color);
}

/* ❌ Неправильно - @import должен быть в начале */
body {
  color: black;
}
@import 'styles.css'; /* Не будет выполнен! */

2. Специфичность

Импортированные стили имеют ту же специфичность, что и локальные правила. Последние в каскаде переопределяют предыдущие.

/* reset.css */
body {
  margin: 0;
  padding: 0;
}

/* main.css */
@import 'reset.css';

body {
  margin: 10px; /* Это переопределит margin: 0 */
}

@import vs Другие подходы

@import в CSS vs Препроцессоры

/* SCSS - более удобный синтаксис */
@import 'variables';
@import 'mixins';
@import 'reset';
@import 'components/button';

/* Можно использовать переменные, функции, nested правила */
.button {
  @extend %button-base;
  background-color: $primary-color;
}

Проблемы @import в браузере

• Производительность: каждый @import создаёт отдельный HTTP запрос
• Блокировка: браузер блокирует рендеринг до загрузки всех импортов
• Задержка: медленнее, чем единый файл CSS

/* ❌ Избегай множественных @import в браузере */
@import 'a.css'; /* Запрос 1 */
@import 'b.css'; /* Запрос 2 - ждёт завершения запроса 1 */
@import 'c.css'; /* Запрос 3 - ждёт завершения запроса 2 */

Современный подход: Сборка стилей

В современной разработке используются сборщики (bundlers) вместо чистого @import:

/* CSS в Next.js / Webpack */
import './styles/variables.css';
import './styles/reset.css';
import './styles/components.css';

// JavaScript импортирует CSS
import './styles.css'; // Сборщик обработает все @import в файле

Преимущества сборки:

• Один HTTP запрос вместо множественных
• Минификация и оптимизация
• Поддержка препроцессоров (SCSS, PostCSS)
• Tree-shaking неиспользуемых стилей

Практический пример структуры

styles/
├── main.css          (главный файл)
├── variables.css     (переменные)
├── reset.css         (сброс стилей)
├── typography.css    (типография)
└── components/
    ├── button.css
    ├── card.css
    └── modal.css

/* main.css */
@import 'variables.css';
@import 'reset.css';
@import 'typography.css';
@import 'components/button.css';
@import 'components/card.css';
@import 'components/modal.css';

Итоги

• Да, import существует в CSS через правило @import
• @import загружает внешние CSS файлы в другой CSS файл
• Синтаксис: @import url('path/to/file.css'); или @import 'path/to/file.css';
• Ограничение: может вызывать проблемы производительности при множественных импортах
• Современный подход: использовать сборщики (Webpack, Vite) для оптимизации и преобразования CSS импортов