CSS Modules

Summary

A way to write plain CSS files where class names are automatically scoped locally to the component that imports them, avoiding global name collisions. Local scoping reduces accidental collisions while retaining familiar CSS syntax, making CSS Modules a practical middle ground between global stylesheets and CSS-in-JS.

• 1Convert a global stylesheet into a `.module.css` file for one component. Validate your understanding by applying it in a small practical example.
• 2Notice how class names get hashed/scoped in the compiled output. Validate your understanding by applying it in a small practical example.
• 3Compare CSS Modules to Styled Components — both solve scoping, differently.