I CSS possono essere difficili da gestire, soprattutto per qualsiasi sito di dimensioni ragionevoli. Dai una mano con questo preprocessore.

Diciamo che impari a conoscere una funzionalità CSS davvero interessante, come l'annidamento. Ma quando vai avanti e lo provi, ti rendi conto che il supporto è terribile e ci vorranno anni prima che tu possa finalmente usarlo. Questo era un grosso problema nei CSS fino all'introduzione di preprocessori come PostCSS.

Scopri come PostCSS ti consente di utilizzare i CSS moderni e futuri oggi durante lo sviluppo. Scoprirai esattamente cos'è PostCSS, come puoi usarlo e il modo migliore per sfruttare le sue funzionalità.

Impostazione del progetto

Passare a una cartella vuota, creare un file denominato index.html e aggiungere il seguente markup HTML nel file:

html>
<htmllang="it">
<Testa>
<collegamentorel="foglio di stile"href="src/styles.css">
Testa>


<corpo>
<P>ParagrafoP>
<div>Divdiv>
corpo>
html>

Questo documento HTML rende un paragrafo e elemento. Importa anche un file di foglio di stile denominato

instagram viewer
styles.css che è all'interno del src cartella. Crea il file nel formato src cartella e includere le seguenti regole di stile CSS:

corpoP {
colore: arancia;
}
corpodiv {
colore: blu;
}
corpo {
Schermo: griglia;
}

Questo CSS modella il colore di entrambi gli elementi sulla pagina e crea un layout a griglia. La maggior parte dei browser supporta la normale sintassi CSS come questa. Ma quando vedi la sintassi più recente, dovrai inserire PostCSS.

Creazione di un progetto Node.js e installazione di PostCSS

In termini semplici, PostCSS ti consente di convertire i CSS moderni in qualcosa che la maggior parte dei browser può comprendere; un processo comunemente noto come transpiling. Questo è perfetto se vuoi provare proprietà CSS nuove, sperimentali o non standard nel tuo codice che i principali browser potrebbero non supportare.

PostCSS offre anche un ricco ecosistema di plug-in JavaScript che puoi installare per abilitare determinate funzionalità, come la minificazione CSS, il supporto del colore e il supporto del lint.

Per utilizzare PostCSS, la prima cosa che devi fare è inizializzare un nuovo progetto Node.js:

npm init -y

Questo comando genererà un file package.json che contiene i valori predefiniti per la tua app.

Successivamente, installa sia PostCSS che PostCSS CLI. Il secondo pacchetto consente di eseguire PostCSS dalla riga di comando:

npm i --save-dev postcss postcss-cli

IL --save-dev flag installa entrambi pacchetti npm come dipendenze di sviluppo; utilizzerai solo PostCSS e i suoi plug-in per elaborare il codice CSS durante lo sviluppo.

Per iniziare a utilizzare PostCSS tramite il interfaccia a riga di comando, entra nel tuo pacchetto.json file e creare il semplice costruire: css comando per transpilare con PostCSS:

"copioni": {
"costruire: css": "postcss src/styles.css --dir dest -w"
}

Questo comando prenderà il tuo CSS nudo (memorizzato in src/styles.css), tranpilare il codice e quindi emetterlo nel file dest cartella. Esecuzione del build npm: css Il comando crea questa cartella e la popola con il file styles.css file contenente codice leggibile dal browser.

Quando importi il ​​tuo CSS nell'HTML, assicurati di importare dalla cartella di destinazione in cui stai compilando il tuo CSS e non dalla cartella di origine da cui PostCSS compila. Questo, nel nostro caso, è il dist cartella, non il file src cartella.

Se apri il tuo sito web in un browser, vedrai che il sito accede ancora al CSS. Ogni volta che apporti modifiche al file sorgente, PostCSS ricompilerà il codice e le modifiche si rifletteranno sulla pagina web.

Utilizzo dei plug-in PostCSS

Ce ne sono centinaia Plugin PostCSS per l'aggiunta di prefissi, lint, nuovo supporto per la sintassi e dozzine di altre funzionalità a PostCSS. Dopo aver installato un plug-in PostCSS, lo attivi all'interno del file postcss.config.js file — un file JavaScript che puoi usare per impostare tutte le configurazioni per PostCSS.

Installa il cssnano Plugin PostCSS con il seguente comando:

npm i --save-dev cssnano

Ancora una volta, devi solo salvare queste dipendenze come dipendenze dev. Il motivo è che tutto ciò accade durante lo sviluppo. Non hai bisogno di PostCSS o di nessuno dei suoi plugin dopo aver spinto il sito in produzione.

Per utilizzare il plug-in cssnano appena installato, devi aggiungere il seguente codice all'interno del file postcss.config.js file:

cost cssnano = richiedere("cssnano")
modulo.esporta = {
 plugin: [
 cssnano({
 preimpostato: 'predefiniti'
 })
 ]
}

Ora, se torni al terminale ed esegui nuovamente il comando build, questo minimizzerà il CSS di output (ovvero renderà il codice il più piccolo umanamente possibile). Quindi, quando spingi su un sito pronto per la produzione, renderà il tuo CSS il più piccolo possibile.

Utilizzo di funzionalità moderne come l'annidamento

Supponi di voler utilizzare la sintassi di annidamento nel tuo foglio di stile, quindi sostituisci il blocco di paragrafo src/styles.css con questo:

corpo {
 & P {
colore: arancia;
 }
}

Questo codice è lo stesso della versione nel tuo codice iniziale. Ma questo genererà un errore perché la sintassi è molto nuova e la maggior parte dei browser Web non la supporta. Puoi abilitare il supporto per questa sintassi con PostCSS installando il file postcss-preset-env collegare.

Il plug-in compila insieme una serie di plug-in diversi per la gestione dei CSS in base alla fase in cui si trova. La fase 0 rappresenta le funzionalità super sperimentali che potrebbero non entrare nemmeno nei CSS. Considerando che, la fase 4 è per le funzionalità del linguaggio che fanno già parte della specifica CSS.

Per impostazione predefinita, presente-env utilizza le funzionalità della fase 2 (che hanno maggiori probabilità di trasformarsi in CSS). Ma puoi cambiare lo stage in quello che vuoi nel file di configurazione.

Per installare il plug-in, esegui il seguente comando:

npm i --save-dev postcss-preset-env

Poi nel tuo postcss.config.js file, devi importare il plugin e registrarlo:

cost cssnano = richiedere("cssnano")
cost postcssPresetEnv = richiedere("postcss-preset-env")
modulo.esporta = {
 plugin: [
 cssnano({
 preimpostato: 'predefiniti'
 }),
 postcssPresetEnv({ palcoscenico: 1})
 ]
}

Dovresti solo superare la fase del nuovo codice CSS che intendi utilizzare. In questo caso, supponiamo che la funzione di annidamento sia allo stadio 1. Quando esegui nuovamente il comando build e controlli il browser, vedrai che è stato compilato il codice annidato in CSS standard che il browser può comprendere.

Utilizzo di PostCSS con i framework

La configurazione manuale di PostCSS può essere un po' una seccatura. Questo è il motivo per cui quasi tutti i framework moderni sono dotati di strumenti di raggruppamento (ad es. Vite, Snowpack e Parcel) e questi strumenti avranno il supporto per PostCSS integrato. E anche se non lo fanno, il processo di aggiunta del supporto PostCSS è incredibilmente semplice.

Ricorda sempre che Vite e la maggior parte degli altri bundler usano Sistema di moduli ES6, non CommonJS. Per aggirare questo, è necessario utilizzare il importare dichiarazione al posto di richiedere() nel tuo postcssconfig.js file:

importare cssnano da"cssnano"
// Il codice di configurazione va qui

Finché hai installato i plugin, tutto funzionerà perfettamente.

Ulteriori informazioni su SaSS

PostCSS è solo uno delle dozzine di preprocessori CSS attualmente disponibili. Uno di questi è SaSS, che sta per fogli di stile sintatticamente fantastici.

Imparare a usare un altro importante preprocessore può tornare utile come sviluppatore CSS.