I CSS modules rappresentano un approccio che consente di limitare localmente i nomi delle classi CSS a specifici componenti. Offrono un modo per scrivere codice CSS in modo modulare e incapsulato, riducendo le possibilità di conflitti tra stili e rendendo la manutenzione degli stili più semplice. Di fatto, sono diventati uno degli approcci più adottati per organizzare i progetti React.

Organizzazione di file e cartelle

Supponiamo di avere la seguente interfaccia utente composta da tre componenti: VideoPlayer, AuthorInformation e VideoDescription.

Non uniremo tutti i componenti e gli stili in un unico file. Al contrario, creeremo una cartella separata per ciascun componente. All'interno di ogni cartella, creeremo un file jsx per il rendering e la logica, e un file css per l'applicazione degli stili. Ogni file css dovrebbe terminare con module.css per ottenere la modularità. La struttura apparirà quindi come segue:

Nota

Questo approccio offre una soluzione pratica per la creazione di componenti React e la scrittura degli stili. Garantisce che ogni componente sia isolato e possa essere riutilizzato in modo efficace. L'assegnazione locale dei nomi delle classi migliora l'organizzazione del codice, favorisce la riusabilità ed evita conflitti di stile.

Sintassi

Analisi della sintassi per l'utilizzo di stili modulari in un componente, utilizzando come esempio il componente VideoDescription.

All'interno di VideoDescription.jsx, viene creato un componente che genera un markup specifico. Non presenta nulla di particolarmente nuovo o insolito.

const VideoDescription = () => (
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

La differenza si presenta quando desideriamo applicare un nome di classe. Prima di tutto, è necessario importare il file VideoDescription.module.css all'interno del file VideoDescription.jsx. Possiamo farlo utilizzando la seguente sintassi:

import <file_name> from "<file_path>";

• <file_name> può essere qualsiasi parola che associamo al file. Generalmente, il nome viene assegnato come: css, styles o semplicemente s;
• <file_path> è il percorso corretto del file. Conosciamo già la sintassi: ./.

Risultato:

import css from "./VideoDescription.module.css";

Per assegnare un nome di classe all'elemento, è possibile utilizzare l'attributo className. All'interno di questo attributo, racchiudiamo il nome della classe desiderata tra parentesi graffe {}. All'interno delle parentesi, includiamo la parola specifica associata al file degli stili, seguita da un punto . e dal nome della classe. Risultato: className={css.text}. text è il vero nome della classe.

import css from "./VideoDescription.module.css";

const VideoDescription = () => (
  <p className={css.text}>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Ora è possibile aprire il file VideoDescription.module.css e applicare gli stili all'elemento p con il nome di classe text utilizzando il selettore di classe:

.text {
  background-color: lightgreen;
  color: darkblue;
  font-size: 24px;
}