Have you ever been styling a component, only to realize that unwanted CSS rules are being applied?
Maybe you then go refactor another section of the CSS so the rules don't apply,
or maybe you throw up your hands and add some !important rules just to get it
working?
This is the problem that CSS Modules solve. Let's look at the official definition of a CSS Module:
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
The key words here are scoped locally. With CSS Modules, your CSS class names become similar to local variables in JavaScript.
By the way, a 'CSS Module' is just a .css file. You call it a 'CSS Module' if
you plan on using it with a CSS Modules compiler.
Let's visualize what we have so far: