Räägi CSS-i moodulitest ja importidest.

Oma omadused (Custom Properties) või CSS-muutujad võimaldavad määratleda korduvkasutatavaid väärtusi (värvid, suurused, fondid) CSS-is.

CSS-preprocessorid (Less, Sass, Stylus) pakuvad funktsionaalsust keele tasemel (muutujad, miksid, funktsioonid, sisseehitatud struktuur), mis kompileeritakse standardseks CSS-ks.

CSS moodulid — see on lähenemine, kus iga CSS-fail loetakse mooduliks ning kõik klasside ja animatsioonide nimed on vaikimisi lokaalsed. Seda saavutatakse automaatselt unikaalsete hash-itud klassinimede genereerimisega, vältides stiilikonflikte komponentide vahel.

CSS-i import:

/* style.css */
@import url("another-style.css");
/* Või lihtsalt */
@import "reset.css";

@import direktiiv võimaldab lisada ühe CSS-faili sisu teise. Oluline: @import peab asuma faili alguses, enne kõiki teisi reegleid, välja arvatud @charset. @import kasutamine võib suurendada lehe laadimisaega, kuna iga imporditud faili jaoks tehakse HTTP-päringud.

CSS-i import JavaScripti tasemel toimub koos ehitajatega (Webpack, Parcel, Rollup):

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

Ehita tööriist töötleb selle importi vastavate loaderitega (näiteks css-loader, style-loader), et ühendada ja töödelda CSS-faile. See lähenemine on tõhusam, kuna ehitaja saab CSS-i ühendada üheks või mitmeks failiks, rakendada optimeerimisi ja vahemälu.

Võrdlus:

Võimalus	CSS @import	Ehitajad (JS import)
Päringud	Järjestikused HTTP-päringud	Töötleb ehitaja, sageli ühendab
Sooritusvõime	Võib aeglustada laadimist	Kõrgem sooritusvõime optimeerimiste tõttu
Töötlemine	Ei	Toetab preprocessoreid, minimeerimist, automaatseid eeliseid
Klasside lokaliseerimine	Ei	Toetab CSS Module-sid
Süntaks	Ainult CSS	JavaScript