The problem: two teams, one global class name
Both headings are red and uppercase. Team B's rule came later in the cascade, so it wins for every .title on the page, including the card's. Nothing in the console warns about it.
A CSS Module is a .module.css file whose class names the bundler renames to unique ones, so .title in one component can never clash with .title in another; you import the file as an object that maps your names to the generated ones.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write Button.module.css with classes button, primary (which composes button) and ghost (which composes button), and a Button component that takes variant and picks the right class.
A third-party date picker adds the class .rdp-day_selected to selected days. Write a CSS Modules rule in Calendar.module.css that colours selected days teal only inside your .calendar wrapper.
Explain it without notes
What problem do CSS Modules solve, and how do they solve it?
Walk through what happens between writing .title in Card.module.css and the browser styling an <h2>.
What do composes and :global(...) do?
Why should you never write a generated class name like _title_x7f2a_5 by hand?
Preview
Console
Nothing logged yet.Expected console output
Product card -> rgb(201, 42, 42) uppercase
Delete item? -> rgb(201, 42, 42) uppercase