CSS Academy · Lezione

Cosa fa PostCSS e come funziona

Comprenda PostCSS come strumento di trasformazione CSS basato su plugin JavaScript.

Lezione 1 di 413 passaggi

Cosa fa PostCSS e come funziona è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Che cos'è PostCSS?

PostCSS è uno strumento per la trasformazione del CSS: non è un'estensione del linguaggio come Sass, ma un processore basato su JavaScript che trasforma il CSS standard tramite plugin. La sua architettura a plugin lo rende altamente componibile.

PostCSS e Sass

Sass è un preprocessore con funzionalità proprie del linguaggio. PostCSS è una pipeline di trasformazione che opera sul CSS standard. Possono essere usati insieme: Sass compila per primo, poi PostCSS applica ulteriori trasformazioni.

Come funziona PostCSS

PostCSS analizza il CSS trasformandolo in un AST (albero sintattico astratto), i plugin trasformano l'AST e PostCSS lo serializza nuovamente in CSS. I plugin possono aggiungere, rimuovere o modificare qualsiasi nodo CSS.

Installazione di PostCSS

PostCSS viene usato più comunemente tramite Vite, webpack o postcss CLI:

npm install postcss postcss-cli autoprefixer cssnano

postcss.config.js

Il file di configurazione standard di PostCSS:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' })
  ]
};

PostCSS come fase della pipeline di build

In Vite, PostCSS è integrato. Aggiunga la configurazione a vite.config.js o postcss.config.js:

// vite.config.js
import autoprefixer from 'autoprefixer';

export default {
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
};

Tipi di nodi di PostCSS

L'AST di PostCSS presenta quattro tipi principali di nodi:

Root: l'intero file CSS
Rule: un selettore e un blocco di dichiarazioni
Declaration: una coppia proprietà: valore
AtRule: regole @- (@media, @keyframes ecc.)

Plugin PostCSS più diffusi

L'ecosistema PostCSS include centinaia di plugin:

autoprefixer: aggiunge i prefissi dei vendor
cssnano: minifica il CSS
postcss-preset-env: converte il CSS moderno in CSS compatibile con i browser
postcss-import: incorpora le istruzioni @import
purgecss: rimuove il CSS inutilizzato

Source map

PostCSS può generare source map che riconducono l'output minificato al CSS originale, semplificando il debug nei DevTools del browser.

PostCSS e CSS-in-JS

PostCSS trasforma file CSS statici. CSS-in-JS genera dinamicamente il CSS in JavaScript durante l'esecuzione. Sono strumenti diversi per casi d'uso diversi: PostCSS è più adatto ai fogli di stile tradizionali, mentre CSS-in-JS agli stili dinamici con scope a livello di componente.

Esecuzione di PostCSS tramite CLI

Elabori un file tramite la CLI:

npx postcss input.css -o output.css --use autoprefixer cssnano

Verifica rapida

Che cosa usa PostCSS per rappresentare il CSS durante la trasformazione?

Rispondi nella lezione interattiva

Riepilogo

PostCSS è uno strumento per la trasformazione del CSS che elabora il CSS tramite una pipeline di plugin. Analizza il CSS trasformandolo in un AST, i plugin lo trasformano e infine lo serializza nuovamente in CSS. Lo usi per aggiungere automaticamente i prefissi, minificare il CSS, applicare polyfill per il CSS moderno e realizzare trasformazioni personalizzate. Si integra nativamente con gli strumenti di build Vite e webpack.

Gratis per iniziare

Impara CSS con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 40
Lezioni: 159

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Cosa fa PostCSS e come funziona» è gratuita?

Sì — il testo completo di «Cosa fa PostCSS e come funziona» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Cosa fa PostCSS e come funziona»?

Comprenda PostCSS come strumento di trasformazione CSS basato su plugin JavaScript. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Cosa fa PostCSS e come funziona»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy