Parlez des modules et des imports en CSS.

Les propriétés personnalisées (Custom Properties), ou variables CSS, permettent de définir des valeurs réutilisables (couleurs, tailles, polices) en CSS.

Les préprocesseurs CSS (Less, Sass, Stylus) offrent des fonctionnalités au niveau du langage (variables, mixins, fonctions, nesting), qui sont compilées en CSS standard.

CSS Modules est une approche où chaque fichier CSS est considéré comme un module, et tous les noms de classes et animations sont localisés par défaut. Cela est réalisé par la génération automatique de noms de classes hachés uniques, évitant les conflits de styles entre composants.

Importation en CSS:

/* style.css */
@import url("another-style.css");
/* Ou simplement */
@import "reset.css";

La directive @import permet d'inclure le contenu d'un fichier CSS dans un autre. Important : @import doit être placé au début du fichier, avant toutes les autres règles, sauf @charset. L'utilisation de @import peut augmenter le temps de chargement de la page en raison de requêtes HTTP séquentielles pour chaque fichier importé.

Dans le contexte des bundlers (Webpack, Parcel, Rollup), l'importation CSS se fait au niveau de JavaScript:

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

Le bundler traite cette importation avec des loaders appropriés (par exemple, css-loader, style-loader) pour combiner et traiter les fichiers CSS. Cette approche est plus efficace, car le bundler peut combiner le CSS en un ou plusieurs fichiers, appliquer des optimisations et du caching.

Comparaison :

Opportunité	CSS @import	Bundlers (importation JS)
Requêtes	Requêtes HTTP séquentielles	Traitées par le bundler, souvent combinées
Performance	Peut ralentir le chargement	Meilleure performance grâce aux optimisations
Traitement	Non	Support pour préprocesseurs, minification, autoprefixers
Localisation des classes	Non	Support pour CSS Modules
Syntaxe	Seulement en CSS	En JavaScript