CSS Modules: scoped klassenavne
Aktivér CSS Modules i et Vite- eller webpack-projekt for automatisk at begrænse klassenavne til komponentfilen og eliminere globale style-lækager.
CSS Modules: scoped klassenavne er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er CSS Modules?
CSS Modules omdanner klassenavne ved byggetidspunktet, så de indeholder en unik hashværdi, og afgrænser dem til komponentfilen. En klasse med navnet .card bliver til .card_a1b2c3 – det er umuligt ved et uheld at få den til at kollidere med andre komponenters stilarter.
Sådan fungerer CSS Modules
Importer CSS-filen som et objekt. Brug objektets egenskaber som klassenavne. Bundlere (Vite, webpack) håndterer omdannelsen.
// Button.module.css
.button {
background: #6366f1;
color: white;
padding: 8px 16px;
}
.button--large {
padding: 12px 24px;
}
// Button.tsx
import styles from './Button.module.css';
function Button({ large }: { large?: boolean }) {
return (
<button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
Click me
</button>
);
}Dynamiske klassenavne med clsx
Biblioteket clsx gør det nemmere at sammensætte betingede klassenavne med CSS Modules.
import clsx from 'clsx';
import styles from './Button.module.css';
function Button({ variant, disabled }: ButtonProps) {
return (
<button className={clsx(
styles.button,
styles[`button--${variant}`],
disabled && styles['button--disabled']
)}>
...
</button>
);
}Global CSS i CSS Modules
Brug :global til at erklære klasser, som IKKE skal afgrænses. Det er nyttigt til at tilsidesætte klasser fra tredjepartsbiblioteker.
/* Scoped: */
.container { padding: 16px; }
/* Global (not scoped): */
:global(.react-datepicker) {
font-family: inherit;
}Sammensætning – udvidelse af klasser
CSS Modules understøtter composes til at nedarve stilarter fra en anden klasse, også fra andre moduler.
/* utilities.module.css */
.flexRow {
display: flex;
align-items: center;
gap: 8px;
}
/* Button.module.css */
.button {
composes: flexRow from './utilities.module.css';
background: #6366f1;
}CSS Modules vs. afgrænsede stilarter (Vue)
Vues afgrænsede stilarter og CSS Modules forhindrer begge globale lækager, men de fungerer forskelligt: afgrænsede stilarter tilføjer dataattributter, mens CSS Modules omdanner klassenavne. Begge er gyldige – CSS Modules fungerer også i React.
CSS Modules i Vite
Vite understøtter CSS Modules direkte for filer, der slutter med .module.css. Der kræves ingen ekstra konfiguration.
TypeScript til CSS Modules
Installer typescript-plugin-css-modules, eller generer .d.ts-filer til CSS Modules med værktøjet typed-css-modules for at få autofuldførelse af klassenavne.
Navngivningskonventioner i CSS Modules
Da klassenavne bliver til JavaScript-egenskaber, skal du bruge camelCase til klassenavne i CSS Modules: .buttonPrimary i stedet for .button-primary (bindestregen kræver opslag med kantede parenteser).
Hvornår skal du bruge CSS Modules?
CSS Modules er fremragende til React-applikationer, hvor der er brug for komponentafgrænsede stilarter, men en fuld CSS-in-JS-løsning ville være unødvendigt omfattende. Vite + CSS Modules er en let stylingløsning uden runtime.
CSS Modules vs. CSS-in-JS
CSS Modules: ingen runtime, ren CSS, bedre ydeevne. CSS-in-JS (styled-components): dynamiske stilarter under kørsel, JS-først. For de fleste apps er CSS Modules enklere og hurtigere.
Hurtigt tjek
Hvad sker der med et CSS-klassenavn, når du bruger CSS Modules?
Opsummering: CSS Modules
Importer .module.css-filer som objekter. Klassenavne afgrænses automatisk med en unik hashværdi. Brug :global() til bevidst globale stilarter. Brug composes til nedarvning mellem moduler. Brug clsx til betingede klassenavne. Vite understøtter CSS Modules indbygget. Ingen runtime-belastning sammenlignet med CSS-in-JS.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “CSS Modules: scoped klassenavne” gratis?
Ja — hele teksten til “CSS Modules: scoped klassenavne” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “CSS Modules: scoped klassenavne”?
Aktivér CSS Modules i et Vite- eller webpack-projekt for automatisk at begrænse klassenavne til komponentfilen og eliminere globale style-lækager. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “CSS Modules: scoped klassenavne”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- BEM-metodik: Block Element Modifier
- CSS Modules: scoped klassenavne
- CSS-in-JS: Styled-components og Emotion
- Tailwind CSS' utility-first-tilgang