[Intro]

[Background Music: Friendly and engaging tone]

Instructor:

"Hey there, and welcome back! In our last lesson, we learned how to style React components using inline styles and external CSS files. But when working on larger projects, using global CSS files can lead to class name conflicts and unexpected style overrides.

That’s where CSS Modules come in!

By the end of this lesson, you’ll understand:

✅ What CSS Modules are and why they are useful.

✅ How to create and import CSS Module files in React.

✅ How CSS Modules help us scope styles locally to components, preventing conflicts.

Let’s get started!"

1. Topic Overview

Instructor:

"Normally, when you use an external CSS file, styles are global—meaning any class name can be applied anywhere in the app.

CSS Modules solve this by scoping styles locally to components.

Think of CSS Modules like personalized lockers in a gym:

• 🎒 Standard CSS → Anyone can put their stuff in any locker (global styles).
• 🔒 CSS Modules → Each person has their own locked, private space (scoped styles).

This means you can use the same class names in different components without conflicts!"