CSS Academy · Lezione

CSS Modules: stili con ambito locale

Limiti automaticamente a livello locale i nomi delle classi ai componenti utilizzando CSS Modules nella configurazione di build.

CSS Modules: stili con ambito locale è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Che cosa sono i CSS Modules

I CSS Modules applicano automaticamente un ambito locale ai nomi delle classi CSS nel file del componente in cui sono definiti. Ogni nome di classe viene trasformato in un identificatore univoco durante la fase di build, impedendo la fuoriuscita degli stili globali.

Convenzione dei file

Assegni al file CSS l'estensione .module.css (oppure .module.scss per Sass):

/* Button.module.css */
.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

Importare i CSS Modules

Importi il modulo come oggetto JavaScript. I nomi delle classi diventano proprietà:

import styles from './Button.module.css';

function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)

Composizione delle classi

Utilizzi composes per estendere una classe proveniente da un altro modulo:

/* Button.module.css */
.primary {
  composes: base from "./Base.module.css";
  background: royalblue;
}

Classi globali

Utilizzi :global() per escludere una classe specifica dall'ambito locale:

/* styles.module.css */
.container :global(.third-party-class) {
  /* targets third-party className without scoping */
  color: red;
}

CSS Modules in Vite

Vite supporta i CSS Modules nativamente. I file che corrispondono a *.module.css vengono elaborati automaticamente:

// vite.config.js
export default {
  css: {
    modules: {
      localsConvention: 'camelCase' // .my-class → styles.myClass
    }
  }
}

CSS Modules in webpack

Abiliti i moduli nella configurazione di css-loader:

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]__[local]--[hash:base64:5]'
    }
  }
}

Composizione dei nomi di classe

Combini più classi di moduli usando i template literal oppure la libreria clsx/classnames:

import styles from './Card.module.css';
import clsx from 'clsx';

function Card({ featured }) {
  return (
    <div className={clsx(styles.card, featured && styles.featured)}>
      Content
    </div>
  );
}

Nessun costo a runtime

I CSS Modules vengono risolti interamente durante la fase di build: non comportano alcun sovraccarico di JavaScript a runtime. L'output è CSS standard con nomi di classe rinominati. Questo li rende ideali per le applicazioni in cui le prestazioni sono fondamentali.

Supporto per TypeScript

Generi le definizioni dei tipi TypeScript per i CSS Modules usando typed-css-modules oppure la configurazione cssModuleTypes di Vite, così da accedere ai nomi delle classi con sicurezza dei tipi.

CSS Modules e CSS-in-JS a confronto

Confronto tra i CSS Modules:

Solo in fase di build: nessun costo di JavaScript a runtime
Integrazione con CSS/Sass standard: sintassi familiare
Nessuno stile dinamico tramite interpolazione JavaScript
Meno flessibili per gli stili dinamici basati sui temi rispetto a styled-components/Emotion

Verifica rapida

In che modo un CSS Module impedisce le collisioni tra i nomi delle classi appartenenti a due file di componenti diversi?

Riepilogo

I CSS Modules applicano automaticamente un ambito locale ai nomi delle classi, trasformandoli in identificatori univoci durante la fase di build. È possibile importarli come oggetti JavaScript e accedere alle classi come proprietà. Utilizzi :global() per escludere selettori specifici dall'ambito locale e composes per comporre le classi. Il costo nullo a runtime e il supporto completo alla sintassi CSS/Sass li rendono un'alternativa leggera ai CSS-in-JS per gli stili statici.

Domande Frequenti

La lezione «CSS Modules: stili con ambito locale» è gratuita?

Sì — il testo completo di «CSS Modules: stili con ambito locale» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «CSS Modules: stili con ambito locale»?

Limiti automaticamente a livello locale i nomi delle classi ai componenti utilizzando CSS Modules nella configurazione di build. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «CSS Modules: stili con ambito locale»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Styled-components: tagged template literal
Emotion: css() e styled()
CSS Modules: stili con ambito locale
Vanilla Extract: CSS-in-JS senza runtime

← Torna a CSS Academy