CSS injection in JavaScript, vantaggi e svantaggi

Con l'affermarsi di soluzioni quali React, una delle librerie più diffuse per l'implementazione di interfacce utente, è stata in parte superata una metodologia che prevedeva la separazione netta tra presentazione (HTML) e componenti funzionali (JavaScript); ora dopo l'injection del markup negli script tramite JSX, potrebbe essere utile valutare la possibilità di un utilizzo più diffuso di CSS, e quindi della componente più attinente alla formattazione, in JavaScript.

In un suo recente articolo Tal Bereznitskey propone di prendere in considerazione questo approccio partendo dal constatare che la CSS injection permetterebbe di utilizzare JavaScript invece di soluzioni come LESS CSS, preprocessore che estende CSS introducendo funzionalità aggiuntive, e l'estensione SASS (Syntactically Awesome StyleSheets); ciò consentirebbe tra l'altro di operare con un solo strumento già conosciuto.

Nello stesso modo, lavorando in modo simile a come fa React con JavaScript utilizzando i componenti, con la CSS injection risulterebbe più semplice includere regole di stile specifiche per ciascun componente, senza la necessità di dover gestire dipendenze. In molti casi verrebbe poi meno l'esigenza di dedicare tempo alla stilizzazione, questo perché gran parte del CSS utilizzato sarebbe scoped, cioè finalizzato a determinati elementi e non ad un intero documento.

Vi sarebbero poi altre motivazioni a favore della CSS injection in JavaScript, una di esse riguarda la necessità da parte di quest'ultimo di accedere a dati presenti nei file CSS, si pensi per esempio alle informazioni relative ai colori; con la CSS injection si potrebbero evitare diversi episodi di ridondanza, non dovendo definire i medesimi valori in JavaScript e nei fogli di stile.

In pratica, parliamo di una metodologia che, se accettata e non obbligatoria in tutti i progetti, potrebbe migliorare nettamente la Developer Experience. Appare forse inutile ricordare che gli style sheet permettono di modificare le regole di stile di interi siti Web intervenendo una volta sola e senza dover modificare una sola riga di HTML o JavaScript, motivo per il quale lo sviluppatore dovrà valutare caso per caso il ricorso o meno alla CSS injection in JavaScript.

Via hackernoon