Prova su strada di Tailwind

Non ho mai avuto l’occasione di provare Tailwind CSS e dato che mi è parso un paio di volte davanti gli occhi – anche on top a progetti che abbiamo fatto in passato – ho deciso di spenderci un paio d'ore.

Come funziona

L'idea è di mappare tutte (più o meno tutte) le regole CSS su classi. In questo modo una volta scritto correttamente il markup gli stili vengono in automatico e tutto senza aprire un CSS. Al 90%.

A differenza di Boostrap (o simili) dove hai già i componenti stilati e pronti ad essere usati, qui hai TUTTE le classi a disposizione per crearli. L'aspetto grafico dei componenti generati con Tailwind è effettivamente fedele a se stesso (leggi: originale) e non una copia modificata del componente nativo. Ci piace questa cosa? Ci può piacere. Torniamo sul codice.

Ti faccio un esempio banale. Se scrivi:

<div class="text-12 text-blue bg-yellow-300 
hover:bg-red-300">Ciao</div>

Questo div avrà un testo grande 12px (text-12), colore blue (text-blue), sfondo giallo-giallo chiaro (bg-yellow-300 – il suffisso indica l'intensita, 100 è chiarochiarochiaro, 900 è caricocaricocarico), e in hover lo sfondo diventa rosso (hover:bg-red-300). Hai capito il giochino. Questo era un esempio semplice, nel mondo reale tutto diventa più verboso.

Un approccio del genere – così su due piedi – non è propriamente nelle mie corde: il codice non è leggibile e la complessità è spostata tutta sul markup. In confronto il BEM è la Divina Commedia. Ma capisco che uno sviluppatore a secco di CSS hai una soluzione a portata di mano e facilmente manutenibile. Provo ad andare oltre l'esempio e creare un layout.

Setup del maccherone

Il mio caro decaro.la si presterà anche per questo esperimento e in locale seguo la guida e installo il pacchetto NPM.

Per la cronaca, ho guardato la guida ufficiale e avevo pure un video su YouTube strait-to-the-point. Come fanno i giovani 😎

Prima compilata. Vediamo cosa viene fuori.

Un CSS bello bello da 86923 righe. 1,9MB. 😳  Ok, guardiamo la documentazione.

La documentazione è enorme e ben dettagliata. Il search sul sito ufficiale ti indirizza subito alla regola CSS che stai cercando e, tornando a parlare delle dimensioni finali del file compilato, c'è spiegato come ridimensionarle.

Configurando un parametro nel file di configurazione, tramite PurgeCSS, vengono scansionati una serie di file (qualsiasi, dai template HTML ai file JS) e con un regexp vengono selezionate solo le classi necessarie. Tutte le altre vengono rimosse dal file finale e il risultato è un file decisamente più contenuto (pochi KB). Al livello che alla fine l'ho messo inline nel template (il sorgente è linkato con un commento nel sorgente della pagina).

Impressioni a caldo

Come accennavo sopra: fatto il setup provo a fare un template. Dato che mi sento simpatico lo faccio in Comic Sans.

Le prime impressioni/annotazioni:

• Per usare una libreria del genere devi conoscere il CSS. A differenza dei framework tipo Bootstrap dove puoi fare tutto a forza di copia-incolla, qui hai tutti gli strumenti a disposizione e vai a costrutire puntualmente ogni componente. 
• Ci sono delle impostazioni iniziali che si possono sovrascrivere con un tailwind.config.js. Una sorta di design token generico che si può sovrascrivere con le impostazioni ad-hoc per ogni progetto. Io ho subito cambiato la tipografia 😆.
  
• Se dovessero esserci alcuni stili da dichiarare secondo la classica cascata – ad esempio per i contenuti editoriali – si può fare direttamente in CSS applicando le classi di Tailwind. Lo si fa tramite un comando @apply direttamente nel CSS (che poi andrà ricompilato).

Alla fine il template sono riuscito a farlo e anche abbastanza velocemente. Per farlo ho editato principalmente un file (html) e stilato due robine a mano.

Di positivo abbiamo:

• Scrivi quasi esclusivamente dentro il file HTML. Conoscendo il CSS le classi risultano intuitive e dopo le prime ricerche sulla documentazione (ottima) sei subito autonomo.
• Non hai nulla di "precotto" e quindi non hai la sensazione che il sito sia uguale a tutti gli altri fatti con la stessa libreria (es. Bootstrap).
  
• Chiunque lavori sul progetto può metter mano agli stili e usare la stessa naming convention senza dover usare approcci condivisi o metodologie particolari.

Dal fronte negativo invece abbiamo (come al solito il disagio dello sviluppatore viene fuori più convinto):

• La mole di classi che vai ad usare è imbarazzante. Io mentre le scrivevo pensavo "ma forse sto sbagliando tutto, non è possibile che servano tutte queste classi". Però effettivamente con un approccio così radicale è inevitabile.
• Non riesci a stilare tutto tutto. Ad esempio gli pseudo :before e :after li puoi stilare solo con un (altro) plugin.
• Tutta la complessità è spostata sul markup. Quindi alcune dinamiche tipiche della cascata non le hai più a disposizione SE NON peggiorando ancora di più la pulizia del codice. Alcune regole che specificavi con i selettori "figlio di" sui CSS devi per forza spostarli nel template (o sul JS). Così come per i modifier del BEM: adesso va tutto esplicitato nel markup. Auguri.

Alla fine della fiera è una libreria interessante soprattutto in alcuni contesti (continua a leggere) ma, dovendo pensare a una soluzione di lungo periodo, non so se la adotterei a cuor leggero.

Ma ragionare a componenti, no?

Effettivamente se dovessimo usarlo su un framework JS dove poter scopizzare gli stili cambierebbe poi poco. Alla fine quando chiami un bottone non vedi come è fatto il bottone stesso (vedi il template per un esempio più dettagliato).

Le osservazioni di cui sopra comunque resterebbero: vale la pena stilare un componente spostando tutta la complessità sul markup – per giunta in un contesto dove puoi scrivere il CSS relativo solo a quel componente?

Educazione e design token

In realtà ci sono un paio di aspetti che mi sembrano ottimi di Tailwind.

Il primo è il discorso dei design token. Non ho avuto modo di provare con mano ma credo che importare/esportare design token non sia particolarmente difficile. Non è di certo un'esclusiva di Tailwind ma data la sua natura e soprattutto il config file, immagino sia non troppo impegnativo.

Un vero punto di forza potrebbe essere usarlo per scopi educativi. Mi immagino un ciclo di formazione sulle tecnologie web – tipo alle scuole superiori – dove un esercizio tipo è: scrivi il markup minimo per un dato layout. Adesso, dato il markup, scrivi le classi Tailwind per stilarlo.

Poi nei dopo scuola organizzi i code in the dark 😝

Risorse esterne, questione ideologica e chiusura

Mentre cercavo di orientarmi nell'universo di Tailwind, mi sono imbatutto in pagine interessanti che mi sono appuntato e ora condivido per il futuro me:

• Configurazioni iniziali e intelligenti per Tailwind: 
  https://www.viget.com/articles...
• Prime prove di integrazione di design token su Tailwind: 
  https://hankchizljaw.com/wrote...
  
• Siti fatti con Tailwind 
  https://builtwithtailwind.com/

Infine, anche se in realtà è una domanda che mi sono posto prima ancora di esplorare la libreria, relativamente alla sempreverde domanda su quanto fare articolato un CSS, ti condivido due link di punti di vista interessanti a riguardo.

Il creatore della libreria ha condiviso come è nata l'esigenza di crearla e, come prevedibile, ha le sue buone solide motivazioni. Qui il link.

Dall'articolo viene citato un articolo del 2012 (12!) dove si discute dei pattern per organizzare le classi. Qui il link.

È uno di quegli articoli che invecchiano bene, se lo leggi non sbagli. Ci aggiungo anche questo post che è più legato al paragone con Bootstrap.

Se hai letto gli articoli che ho appena citato (ma anche se non lo hai fatto) e ti stai chiedendo dove tirare le linea tra semantica delle classi (una classe per dire "questo div indica il contenuto della card") e mera utilità delle classi ("questo div ha un bordo solido di 5px rosso"), sono con te. Per quanto mi riguarda la conclusione della discussione che si era animata nella mia testa è arrivata da Twitter: https://mobile.twitter.com/jen...

Semantic HTML is how we bridge the gap between humanity & computers.

It’s the way to encode the complex & nuanced meaning of human language into something software can understand.

— Jen Simmons (@jensimmons) July 15, 2020