CSS Modules: Scoped Class Names
Enable CSS Modules in a Vite or webpack project to auto-scope class names to the component file and eliminate global style leaks.
CSS Modules: Scoped Class Names is a free Frontend Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Are CSS Modules?
CSS Modules transform class names at build time to include a unique hash, scoping them to the component file. A class named .card becomes .card_a1b2c3 — impossible to accidentally collide with other components' styles.
How CSS Modules Work
Import the CSS file as an object. Use the object's properties as class names. Bundlers (Vite, webpack) handle the transformation.
// 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>
);
}Dynamic Class Names with clsx
The clsx library simplifies conditional class name composition with 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 in CSS Modules
Use :global to declare classes that should NOT be scoped. Useful for third-party library class overrides.
/* Scoped: */
.container { padding: 16px; }
/* Global (not scoped): */
:global(.react-datepicker) {
font-family: inherit;
}Composition — Extending Classes
CSS Modules support composes to inherit styles from another class, including from other modules.
/* 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 Scoped Styles (Vue)
Vue's scoped styles and CSS Modules both prevent global leaks but differ: scoped styles add data attributes; CSS Modules transform class names. Both are valid — CSS Modules work in React too.
CSS Modules in Vite
Vite supports CSS Modules out of the box for files ending in .module.css. No extra configuration needed.
TypeScript for CSS Modules
Install typescript-plugin-css-modules or generate .d.ts files for CSS Modules with the typed-css-modules tool to get autocomplete on class names.
Naming Conventions in CSS Modules
Since class names become JavaScript properties, use camelCase for class names in CSS Modules: .buttonPrimary instead of .button-primary (the hyphen requires bracket access).
When to Use CSS Modules
CSS Modules are excellent for React applications where component-scoped styles are needed but a full CSS-in-JS solution is overkill. Vite + CSS Modules is a lightweight, zero-runtime styling solution.
CSS Modules vs CSS-in-JS
CSS Modules: zero runtime, plain CSS, better performance. CSS-in-JS (styled-components): dynamic styles at runtime, JS-first. For most apps, CSS Modules are simpler and faster.
Quick Check
What happens to a CSS class name when you use CSS Modules?
Recap: CSS Modules
Import .module.css files as objects. Class names are automatically scoped with a unique hash. Use :global() for intentional global styles. composes for inheritance between modules. clsx for conditional class names. Vite supports CSS Modules natively. Zero runtime overhead vs CSS-in-JS.
Frequently asked questions
Is the “CSS Modules: Scoped Class Names” lesson free?
Yes — the full text of “CSS Modules: Scoped Class Names” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “CSS Modules: Scoped Class Names”?
Enable CSS Modules in a Vite or webpack project to auto-scope class names to the component file and eliminate global style leaks. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “CSS Modules: Scoped Class Names” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- BEM Methodology: Block Element Modifier
- CSS Modules: Scoped Class Names
- CSS-in-JS: Styled-components and Emotion
- Tailwind CSS Utility-First Approach