Расскажи о модулях и импортах в CSS.

Собственные свойства (Custom Properties), или CSS-переменные, позволяют определять многократно используемые значения (цвета, размеры, шрифты) в CSS.

Препроцессоры CSS (Less, Sass, Stylus) предоставляют функциональность на уровне языка (переменные, миксины, функции, вложенность), которая компилируется в стандартный CSS.

CSS Modules — это подход, при котором каждый CSS-файл считается модулем, а все имена классов и анимаций по умолчанию локализованы. Это достигается путем автоматического генерации уникальных хешированных имен классов, предотвращая конфликты стилей между компонентами.

Импорт в CSS:

/* style.css */
@import url("another-style.css");
/* Или просто */
@import "reset.css";

Директива @import позволяет включать содержимое одного CSS-файла в другой. Важно: @import должен находиться в начале файла, до всех других правил, кроме @charset. Использование @import может увеличить время загрузки страницы из-за последовательных HTTP-запросов для каждого импортированного файла.

В контексте сборщиков (Webpack, Parcel, Rollup) импорт CSS происходит на уровне JavaScript:

// index.js
import './style.css';

Сборщик обрабатывает этот импорт с помощью соответствующих лоадеров (например, css-loader, style-loader) для объединения и обработки CSS-файлов. Такой подход более эффективен, так как сборщик может комбинировать CSS в один или несколько файлов, применять оптимизации и кэширование.

Сравнение: