Modular CSS with CSS Modules
Explore how to implement modular CSS in React using CSS Modules. Understand importing CSS files scoped to components, class name generation to avoid conflicts, and maintaining traditional CSS features for isolated styling in team environments.
We'll cover the following...
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 ...