Usare i moduli CSS in React

Un caso per i moduli CSS e come implementarli nella tua app React

Se sei relativamente nuovo ai CSS, potresti aver riscontrato o meno il problema significativo che si verifica quando lo stile di un'applicazione si espande: poiché le regole CSS seguono l'ambito globale , due o più classi con lo stesso nome entreranno in collisione. Gestire più fogli di stile e tenere traccia delle convenzioni di denominazione nei file CSS può diventare gravoso e, se non si è abbastanza attenti, è inevitabile che si verifichino alcuni conflitti da nomi di classi identici.

I moduli CSS possono risolvere questi errori che potrebbero apparire, soprattutto con la crescita dell'applicazione. In definitiva, ci consentono di utilizzare lo stesso nome di classe in più file senza errori di selettore e regola definendo l'ambito dei nomi di classe localmente per impostazione predefinita.

Un modulo CSS è semplicemente un .cssfile, in cui le classi agiscono in modo simile alle variabili locali in Javascript. È uno strumento che rende unica ogni classe includendo un hash nel loro nome.

Creazione di un modulo CSS

Se stai usando create-react-app, creare un modulo CSS per un componente è relativamente facile. Segui la tipica convenzione di denominazione per un file css, ma inserisci moduleprima .css, in questo modo:[name].module.css

Per vedere un esempio, ecco il mio Task.module.cssfile all'interno di una semplice app da fare:

Se ho un'altra boxclasse in un componente diverso che ha un colore diverso, quelle regole non entreranno in conflitto poiché i moduli applicano l'ambito locale .

Per importare un modulo CSS nel componente corrispondente, importa il foglio di stile dei moduli CSS come styleso [name]Styles:

In JSX, usa la classe CSS definita come prop className in questo modo:

Da qui, puoi aggiungere tutti gli altri moduli CSS che desideri, ricordati di importarli ciascuno con un nome diverso.

Con i moduli CSS, puoi creare file CSS portatili e riutilizzabili e non devi più preoccuparti delle collisioni dei nomi dei selettori o delle regole che influiscono sugli stili di un altro componente.

Spesso di fronte alla decisione sullo stile delle app React, gli sviluppatori sono combattuti tra l'utilizzo di moduli CSS o una libreria CSS-in-JS ( strumento per astrarre il CSS a livello di componente ) come styled-components, Emotion o styled-jsx. Poiché le librerie CSS-in-JS stanno diventando sempre più utilizzate e mainstream per descrivere gli stili in modo dichiarativo, ho notato che molti credono ancora che i moduli CSS siano la strada da percorrere, specialmente per le loro qualità modulari e riutilizzabili che rendono l'esperienza di styling molto di più senza soluzione di continuità.