Metodi di stile per componenti React
Esistono molti metodi diversi per applicare stili ai componenti React. Qui esamineremo alcuni di quelli fondamentali.
L'approccio standard, che possiamo applicare così come nella normale stilizzazione di pagine web, è l'utilizzo del CSS globale. Qui creiamo un unico file CSS esterno condiviso con gli stili. Con questo approccio, tutti i nomi delle classi si trovano nello spazio dei nomi globale, il che può portare a conflitti tra di essi. È anche possibile creare tanti piccoli file CSS. Questo approccio è poco efficiente nella creazione di applicazioni ampie e scalabili.
L'approccio successivo - la stilizzazione in linea,
usandolo, possiamo aggiungere stili CSS in linea,
similmente a come si fa nel normale HTML. In
questo caso lavoreremo con l'attributo
style, passandogli le necessarie
proprietà CSS. L'uso di una tale stilizzazione
è considerata una cattiva pratica e è raccomandata
solo per aggiungere stili calcolati dinamicamente
durante il rendering. Questo
metodo è buono per una rapida prototipazione
dell'interfaccia di un singolo componente.
La prossima coppia di metodi che esamineremo sono moderni, stanno guadagnando popolarità, sono modi efficienti di applicare stili. Questi sono proprio i metodi che si raccomanda di applicare per la stilizzazione di grandi applicazioni React scalabili.
Il primo di questi - l'applicazione della libreria Styled Components, che utilizza per gli stili stringhe template. Questo metodo ci permette di scrivere CSS normale nel codice JS, utilizzando tutte le sue funzionalità.
Il secondo metodo - l'applicazione dei moduli CSS. In questo caso, un modulo CSS è un file CSS in cui per impostazione predefinita tutti i nomi delle classi e delle animazioni si trovano in uno spazio dei nomi locale, cioè accessibili solo all'interno del componente che lo utilizza.
In questi due ultimi metodi non dobbiamo temere conflitti tra i nomi delle classi, poiché sono univoci - viene utilizzato il concetto di spazio dei nomi locale. Inoltre, con il loro utilizzo non c'è più la necessità della metodologia BEM.
Nelle prossime lezioni esamineremo più in dettaglio tutti i metodi qui presentati.
