Chiacchiere discontinue sui CSS di ieri e di domani

I CSS CAMBIANO? PIANO PIANO

In questo articolo tiriamo le somme su cosa è stato l’ultimo anno per i CSS. Perché, per quanto con i loro tempi, anche i CSS in un certo senso cambiano; non sto parlando solo di release ufficiali, quanto piuttosto dell’utilizzo che se ne fa e di come questi vengono gestiti, anche perché da un po’ di tempo i problemi che devono risolvere sono bene o male sempre gli stessi, ma gli approcci e le tecnologie sono cambiati notevolmente.

Diciamo quindi che i CSS cambiano piano ma ciò che gli gira intorno cambia velocemente, in verità da sempre (Sass o Less? BEM? Atomic design?)

Chi si approccia adesso allo studio del Frontend Design, probabilmente non ha vissuto i traumi dei primi stili, quando ancora si scrivevano inline e alcuni venivano gestiti da dei tag invece che dall’attributo style, e si trova davanti uno strumento abbastanza completo, tuttavia, nonostante questo, non a tutti piace scrivere CSS.

Faccio quindi outing subito: mi piace scrivere CSS.

ESSERE IN LINEA CON I TREND NEL FRONTEND

Osservando “i miei simili” e quello che presentavano le conferenze del settore e le pubblicazioni, ho realizzato sia cosa voleva dire essere trendy, sia quali erano le discrepanze con la realtà di tutti i giorni.

Innanzi tutto, un sacco di gente usa ancora Bootstrap, ma non lo dice in giro. Oggettivamente è ancora uno strumento di tutto rispetto; certo con i suoi difetti, ma viene aggiornato e si trovano temi Bootstrap per React, ad esempio. Solo che nessuno lo vuole più ammettere. Povero Bootstrap.

Si parla tantissimo di accessibilità. Ma tantissimo. Peccato che poi, per un motivo o per un altro, gran parte della realtà online fa acqua da tutte le parti. Alle volte non ci sono abbastanza fondi, altre non c’è tempo, spesso purtroppo non c’è una formazione seria e univoca sull’argomento. Fatto sta che l’accessibilità sanno tutti cos’è, ma il web, in generale, accessibile non è.

Dicono tutti di preferire Tailwind – che in effetti ha una gestione dei CSS di rottura con il passato, c’è una sorta di rifiuto della cascata, in un certo senso si torna all’inserimento dello stile nell’html – però poi, stringi stringi, non son mica tanti a usarlo davvero.

I VERI CAMBIAMENTI RIVOLUZIONARI DEGLI ULTIMI ANNI

La più recente rivoluzione nella scrittura dei CSS si deve in verità ad alcune innovazioni già in giro da un po’, che vanno perfezionandosi di giorno in giorno e rappresentano un nuovo approccio al Frontend Development. Senza entrare nel dettaglio che per me sarebbe oggettivamente troppo tecnico, direi che gli Web Components, con i loro stili incapsulati, già sono un discreto stacco rispetto al passato.

Desideratissime, inoltre, le custom properties; tutti noi bramavamo da anni delle variabili CSS pure, a prescindere da Sass o Less. Sono state subito interpretate da tutti i browser e adottate con gioia da sviluppatori di temi e framework. Peccato non si possa dire lo stesso del valore di fallback usato con le variabili, che invece non viene dichiarato praticamente mai. Ed è un peccato, primo per la sua natura di paracadute in caso qualcosa vada storto nell’interpretazione di una variabile, secondo perché potrebbe prestarsi ad una ulteriore gestione di temi base e modificatori.
Parlando di strumenti che offrono un booster ai CSS e sono usati davvero poco, chi usa la pseudo-variabile currentcolor? Ha il valore ereditato dalla proprietà color e può essere assegnata a qualunque proprietà CSS che accetti un colore come valore; può essere molto utile per assegnare lo stesso colore a molteplici proprietà di uno stesso elemento. Carina, no?

In ultimo, ma non per importanza, non scordiamo le Media Queries, che da qualche anno a questa parte stanno pian piano facendosi strada su mille parametri diversi, senza limitarsi alle dimensioni della viewport. Particolarmente interessanti, ad esempio, sono quelle di interazione, che permettono di identificare il device a prescindere dalla sua risoluzione:

TAILWIND E L’ESIGENZA DI UN FRAMEWORK OGGI

Se i framework CSS siano cosa buona o meno, temo sia argomento al limite del filosofico. 

Certo è che si tratta di strumenti utili, e l’ultimo a balzare agli onori della cronaca è stato appunto Tailwind. Si tratta di un framework utility-first, con classi che determinano proprietà CSS specifiche ma nessun elemento della UI già preconfezionato.

Mentre, infatti, gli altri framework come Bootstrap, Bulma, etc. hanno dei componenti già stilati (bottoni, avvisi, card, etc.), in Tailwind è necessario comporre il proprio componente con classi separate, ognuna dedicata ad una proprietà specifica di quell’elemento. Per utilizzarlo, quindi, è necessaria un’ottima competenza nei Vanilla CSS e buone capacità di design frontend.

Mi sono permessa di elencare quelli che ritengo siano i suoi pregi e i suoi difetti, in caso abbiate delle perplessità che superano le mode del momento e vi stiate chiedendo se altri la pensano come voi.

PRO

• Estrema versatilità, in un modo web in cui tutti i siti si somigliano perché fatti con lo stesso framework e gli stessi elementi UI. Gradito dai creativi del Frontend.
• Non c’è la necessità di sovrascrivere gli stili del framework, nascono già personalizzabili.
• Responsive by design. Per gestire i vari devices si possono utilizzare le utilità reattive (ci sono anche in bootstrap, mentre in vanilla CSS dovremmo scrivere media queries).
• Alcune classi reattive: possiamo applicare lo stile agli elementi al passaggio del mouse, focus, etc. utilizzando una classe specifica.

CONTRO

• Molto verboso se non si adottano degli escamotage (uso di @apply, ad esempio).
• Serve una grande competenza nelle potenzialità dei CSS.
• Necessita di una minificazione altrimenti è enorme, contemplando praticamente tutte le casistiche di stile che possono essere assegnate attraverso le proprietà CSS.
• Ha senso solo se usato in associazione con i Web component, altrimenti la gestione dei vari elementi UI sarebbe ridondante e non manutenibile.

In conclusione, lo userei?

Probabilmente non è il mio strumento, tuttavia ne apprezzo le potenzialità a livello didattico e lo spunto di riflessione che pone. Di certo, non è una rivoluzione nelle potenzialità dei CSS, quanto più un trend nel metodo di utilizzo.

E PER IL FUTURO?

Spostando il nostro sguardo su un orizzonte ancora in divenire, ci sono alcuni lavori in corso da tenere d’occhio perché potrebbero rivelarsi un bel potenziamento, concludiamo quindi questo articolo con tre esempi interessanti.

1. L’introduzione dei cicli if, che purtroppo in CSS saranno cicli When, per non creare conflitti su Sass. 

 

esempio:

 

Sarebbe decisamente un’innovazione per i Vanilla CSS, tuttavia al momento zero supporto dei browser, quindi ci stanno ancora riflettendo parecchio

 

2. Le Container Queries. Siamo abituati, grazie alle media queries, a gestire il contenuto in base alla viewport, ma potrebbero esserci dei componenti che devono adattarsi a sistemazioni diverse e sarebbe utile adattarne il contenuto in base allo spazio che hanno a disposizione, indipendentemente dalla viewport

 

Ecco, in un mondo che galoppa sulla creazione di devices sempre diversi e che inizia a ragionare per componenti, questo tipo di innovazione è prioritaria, tanto che nell’arco di pochi mesi la compatibilità con i browser è aumentata in modo esponenziale e siamo già a buon punto:

 

3. I Cascade Layers. La gestione delle priorità negli stili CSS è sempre stata una questione aperta. Molti si trovano in difficoltà nel gestire il doppio sistema della cascata e della specificità del selettore, ed alcuni stili di scrittura possono rendere necessario l’utilizzo di attributi deprecati come ad esempio !important.
   Con questa nuova regola vengono prioritizzati i CSS a nostro piacimento, superando il sistema di specificità e ignorando la cascata (o meglio, gestendo la cascata secondo i nostri interessi).

esempio:

Per quanto ad alcuni questa nuova regola offra scenari apocalittici di un’entropia devastante (questo perché non sostituisce un criterio di gestione delle priorità, ma ne aggiunge uno nuovo, e chi sapeva usare i precedenti non ne sentiva il bisogno), inspiegabilmente ha riscosso un buon successo e gode già di una discreta compatibilità con i browser.

In conclusione, vogliate bene ai CSS

Bistrattati dai developer e occultati dai framework, i CSS possono dare molto di più di quello per cui normalmente sono usati. Non abbiate paura di giocarci!

Funzionano in modo anomalo, è vero, ma hanno molte potenzialità; studiare le loro proprietà ci aiuta anche a porci domande sulla fruizione del web da parte di utenti diversi da noi e con risorse e/o esigenze diverse.