CSS Modules

Codelab

🧑‍🏫 Styling React Components with CSS Modules

🧩 What are CSS Modules?

A CSS Module is a CSS file in which all class and ID names are scoped locally by default to the component that imports them.

💡 Why use them?

In regular CSS:

Styles are global.
A .button in one file could override a .button in another.

With CSS Modules:

Each class name is locally scoped to the component.
React automatically renames the classes to avoid conflicts (e.g. button_abc123).
You can write regular CSS — but with added safety and structure.

✅ Pros and ❌ Cons

Pros	Cons
No name collisions	Slightly more setup
Fully compatible with regular CSS	You have to remember to `import`
Easy to use, especially in small teams	Not as dynamic as styled-components
Great with TypeScript + IDEs	No media query composition

🚀 How to Use CSS Modules in React

🧱 1. Project structure

src/
├── App.jsx
├── App.module.css

📄 2. `App.module.css` — This is the CSS Module

/* App.module.css */
.container {
  padding: 2rem;
  background-color: #f0f0f0;
  text-align: center;
  border-radius: 8px;
}

.title {
  color: #333;
  font-size: 1.8rem;
}

.button {
  padding: 0.5rem 1rem;
  border: none;
  background-color: teal;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

⚛️ 3. `App.jsx` — This is the React component

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

export default function App() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Welcome to CSS Modules</h1>
      <button className={styles.button}>Click me</button>
    </div>
  );
}

Note: styles.container uses the class from App.module.css, but it’s automatically scoped to this component.

🧪 Try It Yourself

1. Start a new Vite or Create React App project

npm create vite@latest css-modules-demo --template react
cd css-modules-demo
npm install
npm run dev

2. Add the `.module.css` file next to any component and start using scoped styles

💡 Bonus Tips

You can combine multiple classes:

className={`${styles.button} ${styles.danger}`}

You can still use global styles (like index.css) for base layout and reset rules.

🧠 Summary

Feature	CSS Modules
Syntax	Regular CSS
Scope	Local to the importing component
Use case	Medium-sized React apps
How to use	`import styles from './X.module.css'`