- How to Use CSS Module in Gatsby JS
In this tutorial, we will be discussing what is CSS Module, why and how to use it and finally, we will be implementing CSS Module using Gatsby.
What is CSS Module?
objectName.propertyName or objectName['propertyName']
Why use CSS Module?
The best use of CSS Module is no more class name clashes since all classes/selectors will have unique names. Did you ever experience writing css classes and then you're conscious if that class name is already existing?
In some cases you will accidentally add a style to the one which is already working fine. This class name issues can make side effects specially if you are working in a large project. So CSS module will fix this issue by transforming your classes with unique class names.
CSS Module is also applicable to only one component where it was imported. This is good since Gatsby is a react-based framework, we can take advantage of its modularity. One good example if you have different components like button, checkbox, etc., you can add their own styles without worrying selector names. You can use the same class name to every component.
Lastly, no more long class names like Open BEM methodologyBEM methodology. A simple class name will work.
How to use CSS Module?
To use CSS module using Gatsby, first you need to create a new file with module.css file name. Say for example, we have a component layout.js, we can create a new file layout.module.css.
Create and Implement CSS Module?
To better understand how to implement CSS module using Gatsby, kindly check the video below.