CSS Modules, simulated: same local name, different real names
Each file's .title became a different real class, so the card titles stay blue and the modal title stays red. The featured card has two classes because of composes. Click the button: .dark is global, so it is not renamed, and the scoped card rules react to 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
_title_x7f2a_5 vs _title_p91kd_1
Plain card -> rgb(24, 100, 171)
Featured card -> rgb(24, 100, 171)
Delete item? -> rgb(201, 42, 42)
_featured_x7f2a_9 _card_x7f2a_1