CSS Academy · Lektion

CSS Modules: lokalt avgränsade format

Avgränsa automatiskt klassnamn lokalt till komponenter med CSS Modules i er byggkonfiguration.

Lektion 3 av 413 steg

CSS Modules: lokalt avgränsade format är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad är CSS Modules?

CSS Modules avgränsar automatiskt CSS-klassnamn till den komponentfil där de definieras. Varje klassnamn omvandlas till en unik identifierare vid byggtid – vilket förhindrar att stilar läcker ut globalt.

Filnamnskonvention

Döp CSS-filen till .module.css (eller .module.scss för Sass):

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

Importera CSS Modules

Importera modulen som ett JavaScript-objekt. Klassnamn blir egenskaper:

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

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

Sammansatta klasser

Använd composes för att utöka en klass från en annan modul:

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

Globala klasser

Använd :global() för att avstå från lokal avgränsning för en specifik klass:

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

CSS Modules i Vite

Vite har inbyggt stöd för CSS Modules. Filer som matchar *.module.css bearbetas automatiskt:

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

CSS Modules i webpack

Aktivera moduler i konfigurationen för css-loader:

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

Sammansättning av klassnamn

Kombinera flera modulkanser med template literals eller biblioteket 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>
  );
}

Ingen kostnad vid körning

CSS Modules löses helt vid byggtid – det finns inget overhead för JavaScript vid körning. Resultatet är vanlig CSS med omdöpta klassnamn. Därför passar de utmärkt för prestandakänsliga applikationer.

TypeScript-stöd

Generera TypeScript-typdefinitioner för CSS Modules med typed-css-modules eller Vites konfiguration cssModuleTypes för typsäker åtkomst till klassnamn.

CSS Modules jämfört med CSS-in-JS

Jämförelse av CSS Modules:

Endast vid byggtid – ingen kostnad för JavaScript vid körning
Integreras med standard-CSS/Sass – välbekant syntax
Inga dynamiska stilar via interpolation i JavaScript
Mindre flexibla för temastyrda dynamiska stilar än styled-components/Emotion

Snabb kontroll

Hur förhindrar en CSS Module krockar mellan klassnamn i två olika komponentfiler?

Besvara frågan i den interaktiva lektionen

Sammanfattning

CSS Modules avgränsar klassnamn automatiskt genom att omvandla dem till unika identifierare vid byggtid. Importera dem som JavaScript-objekt och använd klasser som egenskaper. Använd :global() för globala selektorer och composes för klassammansättning. Ingen kostnad vid körning samt fullt stöd för CSS/Sass-syntax gör CSS Modules till ett lättviktigt alternativ till CSS-in-JS för statiska stilar.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”CSS Modules: lokalt avgränsade format” gratis?

Ja – hela texten till ”CSS Modules: lokalt avgränsade format” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”CSS Modules: lokalt avgränsade format”?

Avgränsa automatiskt klassnamn lokalt till komponenter med CSS Modules i er byggkonfiguration. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”CSS Modules: lokalt avgränsade format”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Styled-components: taggade malliterals
Emotion: css() och styled()
CSS Modules: lokalt avgränsade format
Vanilla Extract: CSS-in-JS utan körtidskostnad

← Tillbaka till CSS Academy