PostCSS, un nuovo Strumento per i tuoi CSS

Torniamo ancora una volta a parlare di CSS, non tanto di come scriverlo o come sia possibile applicare un determinato effetto ma questa volta voglio parlarti di una novità che va avanti da diversi anni.

In questo blog abbiamo trattato spesso soluzioni che ci permettono di migliorare la qualtà del codice che possiamo scrivere, ma ne abbiamo approfondite altre che ci hanno reso sempre più veloci come ad esempio i preprocessori.

In questi anni ci siamo dapprima interessati a LESS.js che è stato il mio primo incontro con il mondo dei precompilatori fino a specializzarsi nella creazione di codice Sass che si è reso sempre più interessante grazie alla presenza delle sue librerie e potenti funzionalità.

L’argomento di oggi non sarà tecnico come i precedenti, ma piuttosto ho deciso di guardare al futuro e cercare di capire come si sta muovendo il mondo dei CSS. Come scoprirai tu stesso dalla lettura, la definizione guardare al futuro non è tra le più corrette dato che il progetto che prenderemo in analisi è in vita fin dal 2013.

Ho fatto un piccolo riferimento temporale per mettere in luce un concetto molto importante; anche nello sviluppo web esistono i trend, ma non per questo siamo giustificati a studiare ogni nuova tecnologia che il mondo open source riesce a sfornare.

Come mi è capitato di ricordarti più volte, all’interno del network AndMore cerchiamo di fare da filtro, di osservare da vicino gli sviluppi di determinati linguaggi e soluzioni e presentarteli nel momento più opportuno. Oggi penso proprio che sia il caso di farti incontrare PostCSS.

Negli ultimi anni questa soluzione è cresciuta sempre più velocemente e se alla fine del 2014 contava quasi un milione e mezzo di download, soltanto a Giugno 2015 ha già raddoppiato questo traguardo raggiungendo quasi quattro milioni di download.

Questo si traduce in un sacco di interesse e molte soluzioni che potremo andare a realizzare con questa tecnica. Addirittura Mark Otto ha parlato di PostCSS dichiarando che la versione 5 di Bootstrap sarà sviluppata con gli strumenti offerti da questa soluzione.

Anche Codepen.io, la soluzione ci permette di condividere codice frontend all’interno dei nostri webinar, ha recentemente incluso il supporto a questa tecnologie diventando uno strumento sempre più interessante.

Una piccola introduzione

cosa-postcss

Praticamente PostCSS non è altro che un insieme di plugin JavaScript che trasformano il nostro codice in classico CSS. Uno tra i plugin più famosi prende il nome di Autoprefixr e viene utilizzato da Google, Twitter, Shopify e molti altri big del settore.

Proprio come per LESS.js e Sass, grazie a questi plugin possiamo utilizzare variabili e mixin, testare le future regole CSS, trasformare le immagini in data URI e molto altro. Tutte queste soluzioni sono raggiungibili attraverso Sass, ma cerchiamo di capire meglio perché stiamo prendendo in analisi PostCSS.

Praticamente il lavoro di questa tecnologia è quello di prendere il nostro codice CSS e renderlo un dato che può essere lavorato attraverso JavaScript. Come anticipato precedentemente, esistono molti plugin scritti in JavaScript che possono essere usati per aggiungere funzionalità per aggiungere i prefix al proprio codice, aggiungere future sintassi, creare sistemi a griglia, aggiungere scorciatoie… Insomma la lista delle possibilità è veramente molto lunga.

Se sai quale sia il tipo di plugin che desideri usare puoi tranquillamente consultare questa pagina e utilizzare il motore di ricerca, ma gli scopi di questo articolo sono ben altri.

Molto probabilmente ti starai chiedendo perché prendere in considerazione questa soluzione e forse anche se dovrai imparare una nuova sintassi. Ebbene sul perché la mia risposta è abbastanza ovvia, devi essere in grado di restare competitivo su un mercato in continua evoluzione e l’unico modo per farlo è conoscere da vicino quali sono le novità che potrebbero aiutarti in questo.

Fossi in te non mi preoccuperei invece della necessità di dover conoscere una nuova sintassi perché fa semplicemente parte del processo di crescita della tua carriera ;)

Che cosa non è PostCSS

Ebbene ti ho presentato le basi di PostCSS con alcune soluzioni che, in fin dei conti, sono disponibili anche attraverso Sass; questo significa che abbiamo di fronte un nuovo preprocessore?

La risposta a questa domanda è negativa perché quello che ci permette di fare questa soluzione è scrivere del classico CSS, al posto delle nuove sintassi introdotte dai preprocessori, e al tempo stesso permette di poter lavorare con mixin e molti altri stili di sviluppo che ci renderanno la vita molto meno complicata.

Tutto il team di PostCSS ha smesso di riferirsi a questa soluzione come a un postprocessore perché anche se in grado di svolgere molte operazioni di questo tipo, come la creazione di immagini sprite o l’inserimento dei vari vendor prefix, hanno considerato questa definizione limitante perché con PostCSS si può fare praticamente di tutto!

Precedentemente ho anche scritto che utilizzando questa soluzione ti sarà possibile scrivere il CSS del futuro e anche questo è vero perché grazie al pacchetto nextcss avrai l’opportunità di scrivere la nuova sintassi e sfruttare le nuove funzionalità utilizzando un singolo plugin, ma anche questo non definisce completamente PostCSS.

Forse una delle cose più interessanti è che se conosci il linguaggio JavaScript (altrimenti ti consiglio questo corso gratuito), sarai in grado di aggiungere i tuoi plugin che ti permetteranno di inserire ulteriori funzionalità a quelle già presenti.

Cosa è PostCSS

Da quanto detto fino a ora sembra forse che PostCSS non faccia un bel niente da solo, ma non è assolutamente così. Le soluzioni che possiamo implementare grazie a questo contenitore sono praticamente infinite perché il metodo con i quale mescolerai i vari plugin per raggiungere le tue personalizzazioni non ha assolutamente limite.

Lasciami ripetere un piccolo esempio che ho trovato a giro per la rete e che mi ha permesso di capire meglio che cosa fa PostCSS.

Considera questa soluzione come le fette di pane che utilizziamo per fare un panino. Di per sé non portano un gran gusto al panino, ma la loro funzionalità principale è quella di mantenere pulite le nostre mani e contenere gli ingredienti che abbiamo utilizzato per la sua creazione. PostCSS fa una cosa molto simile dato che non gli interessa che cosa inseriamo al suo interno, come al pane non interessa conoscere il tipo di ingredienti per svolgere la propria funzione; piuttosto funge da contenitore per tutti i plugin che inseriremo al suo interno.

Un altro fattore molto interessante è che PostCSS è incredibilmente veloce. Se non mi credi non devi far altro che consultare questo repository che tiene tutti i vari benchmark e ti permetterà di scoprire velocemente che PostCSS è fino a 26 volte più veloce rispetto alle altre soluzioni; in particolar modo nei confronti di Sass compilato in Ruby (la mia situazione odierna :( ).

Forse ti stai chiedendo come fa PostCSS a essere così veloce… Beh la prima cosa da dire è che è completamente scritto in JavaScript e visti i continui sviluppi sui motori di questo linguaggio le prestazioni non possono che continuare a migliorare; ma se devo essere onesto con te il risultato si ottiene anche grazie alla sua grande modularità.

postcss-power

Comprendo che può sembrare un compito arduo quello di doversi ricordare uno per uno i plugin che vogliamo utilizzare; ma allo stesso modo questo ci impedisce di dover importare soluzioni molto complesse, come Compass per Sass ad esempio, dove utilizziamo soltanto una parte degli strumenti offerti.

Per nostra fortuna ci sono molti sviluppatori che ci vengono a dare una mano. Il caso di nextcss ne è soltanto un esempio perché esistono molti altri pacchetti che ti permetteranno di iniziare a sviluppare in PostCSS in un lampo sfruttando una configurazione già impostata.

Desideri per esempio continuare a scrivere la tua sintassi SCSS ma vuoi sfruttare la velocità di PostCSS? Ebbene non devi far altro che controllare su GitHub il pacchetto PreCSS che grazie a una serie di plugin è in grado di portare tutta la potenza della sintassi Sass unita all’immediatezza offerta da questa soluzione.

Non sei curioso di scoprirlo?

Ho deciso di scrivere questo breve articolo di presentazione per sapere che cosa ne pensi, saresti interessato ad approfondire questi argomenti? Stavo pensando di iniziare a trattare un po’ più da vicino PostCSS e pensavo addirittura di creare successivamente un corso su skillsAndMore, ma prima di fare queste cose vorrei sapere da te che cosa ne pensi.

Io la ritengo una soluzione da tenere sicuramente sott’occhio e con molta probabilità andrò ad integrarla all’interno del mio sviluppo, ma ovviamente non posso costringerti ad imparare queste cose e per questo motivo ti sto chiedendo di dimostrare il tuo interesse.

Fammi sapere all’interno dei commenti la tua opinione oppure scrivimi sfruttando la pagina Contatti.

Conclusioni

Siamo giunti al termine di un altro articolo. Come dicevo all’inizio questo non è stato un articolo molto tecnico ma ho desiderato trattare lo stesso l’argomento perché volevo presentarti il prima possibile una soluzione che ritengo tanto interessante quanto veloce!

Il web è in continua evoluzione e noi dobbiamo lottare per essere in grado di sfruttare al meglio la tecnologia che ci mette a disposizione, per essere sempre più veloci nel nostro lavoro e avere maggior tempo a disposizione da spendere facendo le cose che amiamo.

PostCSS è soltanto uno degli aspetti dello sviluppo frontend che trattiamo e anche se importante, ne esistono sicuramente altri che meritano un’attenzione particolare. Tu hai letto qualcosa o desideri approfondire qualche argomento specifico?

Non esitare a scrivere all’interno della sezione dei commenti per condividere i tuoi interessi, sono sicuro che possono nascere delle discussioni interessanti ;)

 

Lascia il tuo Pensiero

2 Responses to “PostCSS, un nuovo Strumento per i tuoi CSS”

  1. Carmine D'Amore

    Ciao Andrea. E’ passato molto tempo dal mio ultimo commento sulla vostra piattaforma. Complimenti per l’articolo.
    Io sarei felice di approfondire quest’argomento in quanto da poco sono stato assunto in un’azienda come sviluppatore frontend e non mi dispiacerebbe utilizzare questa nuova tecnologia.
    Saluti
    Carmine

    Rispondi