CSSX: CSS in JavaScript

CSSX è un progetto nato con la particolare finalità di offrire uno strumento grazie al quale generare e applicare regole di stile CSS attraverso JavaScript. Si tratta in sostanza di una libreria client side fornita come API in grado di produrre CSS puro, o se si preferisce "vanilla CSS", tramite injection e senza determinare l'introduzione inline degli stili, in questo modo si potrà garantire la massima pulizia del markup.

CSSX agisce in sostanza come una sorta di transcompiler per la compilazione da sorgente a sorgente, l'interfaccia lato client si occuperà quindi di elaborare il codice scritto in un linguaggio con lo scopo di restituire in output dei costrutti sintatticamente validi in un altro linguaggio. Il suo funzionamento è per molti versi simile ad altre soluzioni basate sull'incapsulamento come JSX, l'estensione JavaScript nata in seno al progetto React e concepita per il rendering dei tag HTML.

La libreria cerca di venire incontro alle esigenze di chi concentra la maggior parte del proprio lavoro sul browser Web considerato il basso livello di scalabilità dell'inline styling; nel caso in cui si fosse scelta una strada basata sulla presenza di CSS in JavaScript, vi sarebbero stati dei limiti per quanto riguarda la possibilità di controllare le regole di stile (nuovi inserimenti, aggiornamenti, rimozioni..) riproponendo di fatto la necessità di un foglio di stile esterno.

Ecco perché invece di basarsi su una soluzione che agisce sulla proprietà style del DOM si è preferito implementare delle injection a runtime attraverso un libreria client side che consentisse di stilizzare tramite JavaScript qualsiasi elemento fosse stato generato da quest'ultimo. Questo approccio aiuterebbe a risolvere anche un altro problema, quello relativo al FOUT (Flash of unstyled text) che è l'effetto che si verifica nell'inline styling quando gli stili devono essere ancora caricati.

Il FOUT ha in genere una durata breve, comunque variabile a seconda del peso dei fattori che influenzano la velocità di navigazione, risolvendosi in un peggioramento più o meno sensibile dell'esperienza utente dovuto alla mancata stilizzazione degli elementi di pagina; con la transcompilazione l'applicazione istantanea degli stili riuscirebbe a superare anche questo limite.

Via CSSX