Modular CSS with CSS Modules

Importing and using CSS modules

CSS Modules are some sort of predecessor to CSS-in-JS and combine several properties from CSS and JavaScript modules. As the name already suggests, the CSS is found in their own importable modules, which, however, contain pure CSS and are tied to one particular component. If we were to develop a component to display a profile picture in a file called ProfileImage.js, the CSS Modules approach often introduces another file with the name ProfileImage.module.css. When these CSS modules are imported, a cryptic class name is generated to ensure that the className is only used in a single ...