Если не знаешь что делать дальше попросишь помощи в чате или у тимлида

CSS @import: как импортировать стили в CSS

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

Синтаксис @import

Базовый синтаксис

/* Способ 1: с url() */
@import url('path/to/file.css');

/* Способ 2: без url() */
@import 'path/to/file.css';

/* Способ 3: с media query */
@import 'mobile.css' screen and (max-width: 768px);

Примеры

/* main.css */

/* Импорт базовых стилей */
@import 'reset.css';

/* Импорт переменных и функций */
@import 'variables.css';

/* Импорт стилей компонентов */
@import 'components/button.css';
@import 'components/card.css';

/* Импорт для мобильных */
@import 'mobile.css' screen and (max-width: 768px);

/* Остальные стили... */
body {
  margin: 0;
  padding: 0;
}

Способы использования @import

1. В CSS файле

/* styles/main.css */
@import 'styles/typography.css';
@import 'styles/layout.css';
@import 'styles/components.css';

:root {
  --primary-color: #007bff;
}

2. В HTML <style> теге

<style>
  @import url('styles/main.css');
</style>

3. В <link> теге (НЕ @import, но похожий результат)

<!-- Это не @import, но достигает того же результата -->
<link rel="stylesheet" href="styles/main.css">

@import vs <link>

Важное отличие

<!-- Способ 1: @import в CSS (ПОСЛЕДОВАТЕЛЬНАЯ загрузка) -->
<style>
  @import 'base.css';      /* Загружается первой -->
  @import 'layout.css';    /* Затем эта -->
  @import 'components.css'; /* И последняя -->
</style>

<!-- Способ 2: <link> в HTML (ПАРАЛЛЕЛЬНАЯ загрузка) -->
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="components.css">

<link> загружается параллельно (быстрее), @import - последовательно (медленнее)

Реальный пример структуры проекта

styles/
├── main.css          # Главный файл
├── variables.css     # CSS переменные
├── reset.css         # Reset/Normalize
├── typography.css    # Типография
├── layout.css        # Layout стили
├── components/
│   ├── button.css
│   ├── card.css
│   └── modal.css
└── responsive.css    # Media queries

Содержимое main.css

/* Импорты должны быть в начале файла */
@import 'variables.css';
@import 'reset.css';
@import 'typography.css';
@import 'layout.css';
@import 'components/button.css';
@import 'components/card.css';
@import 'components/modal.css';
@import 'responsive.css';

/* Остальные стили */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Важные правила @import

1. @import должен быть в начале файла

/* ПРАВИЛЬНО */
@import 'reset.css';
@import 'variables.css';

body {
  margin: 0;
}

/* НЕПРАВИЛЬНО - @import в конце игнорируется */
body {
  margin: 0;
}

@import 'reset.css'; /* Может не работать */

2. @import работает с относительными и абсолютными путями

/* Относительный путь */
@import 'components/button.css';           /* От текущей папки */
@import '../styles/utils.css';             /* Родительская папка */

/* Абсолютный путь */
@import '/styles/main.css';               /* От корня сайта */
@import 'https://fonts.googleapis.com/css?family=Roboto';

3. @import с media queries

/* Импортировать только для мобильных */
@import 'mobile.css' (max-width: 768px);

/* Импортировать только для печати */
@import 'print.css' print;

/* Импортировать для всех экранов */
@import 'screen.css' screen;

Проблема производительности

Проблема: @import замедляет загрузку

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

Когда браузер встречает @import:

1. Загружает main.css
2. Встречает @import 'reset.css' - загружает reset.css
3. Ждёт пока reset.css загрузится
4. Встречает @import 'layout.css' - загружает layout.css
5. И так далее...

Это медленнее, чем несколько <link> тегов

Решение: используй <link> вместо @import

<!-- БЫСТРЕЕ - параллельная загрузка -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="components.css">

Почему <link> быстрее:

• Браузер может загружать несколько файлов параллельно
• @import заставляет загружать файлы последовательно
• Разница может быть 500ms и более для больших проектов

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

Хорошие случаи:

/* 1. Импорт Google Fonts (одна строка) */
@import url('https://fonts.googleapis.com/css?family=Roboto');

/* 2. Импорт в препроцессорах (SCSS, LESS) */
@import 'variables';
@import 'mixins';
@import 'components';

Плохие случаи:

/* Не используй для основных файлов стилей */
/* Вместо этого используй <link> */

@import в SCSS/LESS (препроцессорах)

В препроцессорах @import работает иначе!

/* styles.scss */

/* В SCSS импорт объединяет файлы ДО компиляции */
@import 'variables';
@import 'mixins';
@import 'components';

/* При компиляции становится одним CSS файлом */
/* Нет проблем производительности! */

Этот SCSS:

@import 'variables';
@import 'button';

Компилируется в:

:root {
  --primary: blue;
}

.button {
  background: var(--primary);
}

Практический пример в React проекте

В React лучше импортировать CSS в JavaScript

// App.jsx
import './styles/main.css';
import './styles/components.css';

function App() {
  return <div>App</div>;
}

Это становится:

<!-- В HTML -->
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="components.css">

CSS @import vs JavaScript import

CSS @import

@import 'styles/main.css';

JavaScript import (для модулей)

import './styles/main.css';
import { colors } from './constants';

Это разные механизмы для разных целей!

Практические рекомендации

Что выбрать:

1. Для CSS файлов: используй <link> (быстрее)
2. Для SCSS/LESS: используй @import (объединяется при компиляции)
3. Для React/Vue: импортируй CSS в JavaScript
4. Для Google Fonts: используй @import (одна строка)

Пример оптимального подхода в Next.js:

// pages/_app.js
import '../styles/globals.css';
import '../styles/components.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Заключение

Да, в CSS есть @import, который позволяет импортировать стили. Однако:

• @import медленнее, чем <link> (последовательная загрузка)
• В современных проектах лучше использовать <link> или импортировать CSS в JavaScript
• В препроцессорах (SCSS, LESS) @import работает иначе и объединяет файлы при компиляции
• Для Google Fonts и одного-двух файлов @import приемлем

Выбор между @import и <link> зависит от контекста, но <link> обычно быстрее.