Let’s say you’d like to add a CSS Modules Stylesheet to your project. You can find Create React App’s guidance here, but essentially — and as the guidance states — CSS Modules let you use the same CSS selector in different files without worrying about naming clashes. This works because each HTML element in your file that you want to style is automatically given a unique class name.

This can seem quite confusing at first, but really the process to implement CSS Modules can be simplified to just 4 steps, as demonstrated in the below example.

1_lmno_4nmNyohGa-gM_GaEw
Yes, really!
  1. A feature of React is that CSS Modules are “turned on” for files ending with the .module.css extension. Create the CSS file with a specific filename in the following format:
Link.module.css

2. Import styling to your component:

import styles from ‘../styling/components/Link.module.css’

3. The styles in your CSS file can follow your preferred naming convention, for instance:

.bold {  font-weight: bold;}

4. The style is applied to the HTML element as follows:

className={styles.bold}

And that’s it!

Photo credit: Adrian Swancar on Unsplash