CSS Modules: Scoped Styles
Automatically scope class names locally to components using CSS Modules in your build setup.
CSS Modules: Scoped Styles is a free CSS Academy lesson on CoddyKit — lesson 3 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 CSS 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 automatically scope CSS class names to the component file they are defined in. Each class name is transformed to a unique identifier at build time — preventing global style leakage.
File Convention
Name your CSS file with .module.css (or .module.scss for Sass):
/* Button.module.css */
.button {
background: royalblue;
color: white;
padding: 10px 20px;
border-radius: 4px;
}Importing CSS Modules
Import the module as a JavaScript object. Class names become properties:
import styles from './Button.module.css';
function Button({ children }) {
return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)Composed Classes
Use composes to extend a class from another module:
/* Button.module.css */
.primary {
composes: base from "./Base.module.css";
background: royalblue;
}Global Classes
Use :global() to opt out of local scoping for a specific class:
/* styles.module.css */
.container :global(.third-party-class) {
/* targets third-party className without scoping */
color: red;
}CSS Modules in Vite
Vite has built-in CSS Modules support. Files matching *.module.css are automatically processed:
// vite.config.js
export default {
css: {
modules: {
localsConvention: 'camelCase' // .my-class → styles.myClass
}
}
}CSS Modules in webpack
Enable modules in css-loader configuration:
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
}Class Name Composition
Combine multiple module classes using template literals or the clsx/classnames library:
import styles from './Card.module.css';
import clsx from 'clsx';
function Card({ featured }) {
return (
<div className={clsx(styles.card, featured && styles.featured)}>
Content
</div>
);
}No Runtime Cost
CSS Modules are resolved entirely at build time — there is no runtime JavaScript overhead. The output is standard CSS with renamed class names. This makes them ideal for performance-sensitive applications.
TypeScript Support
Generate TypeScript type definitions for CSS Modules using typed-css-modules or Vite's cssModuleTypes configuration for type-safe class name access.
CSS Modules vs CSS-in-JS
CSS Modules comparison:
- Build-time only — no runtime JS cost
- Integrates with standard CSS/Sass — familiar syntax
- No dynamic styles via JS interpolation
- Less flexible for theme-driven dynamic styles than styled-components/Emotion
Quick Check
How does a CSS Module prevent class name collisions between two different component files?
Recap
CSS Modules scope class names automatically by transforming them to unique identifiers at build time. Import them as JavaScript objects and access classes as properties. Use :global() for opt-out global selectors and composes for class composition. Zero runtime cost and full CSS/Sass syntax support make them a lightweight alternative to CSS-in-JS for static styles.
Frequently asked questions
Is the “CSS Modules: Scoped Styles” lesson free?
Yes — the full text of “CSS Modules: Scoped Styles” is free to read here on the web, and the CSS 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 CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “CSS Modules: Scoped Styles”?
Automatically scope class names locally to components using CSS Modules in your build setup. You practise CSS 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 CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “CSS Modules: Scoped Styles” 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 CSS Academy lesson?
Yes. Every CSS 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.