So you have finally figured out HTML for your web pages and now comes the step of styling them. Styling can be either extremely enjoyable or painfully hellish; regardless of your stance on the matter, you gotta style those webpages.
The CSS Conundrum
There are many different tools and technologies used to style your webpages that isn't just traditional vanilla CSS. You may have heard of them such as Sass, Less, styled-components, and many more!
Despite the multitude of various technologies to style your webpage, sometimes good ol' fashioned CSS will do the trick just as well (and for some cases, particularly better). By harnessing the power of CSS modules, traditional CSS development doesn't always have to be a pain!
CSS Modules
So why CSS modules?
If you are not familiar with CSS modules, here is an excerpt from the CSS modules documentation repo:
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
For many cases, when we need to add a bunch of styling to our page, we would usually add an external style sheet (usually a global one) into the head of our project. This is fine and all for smaller, less complex projects but can prove to be a problem for projects of growing size.
Modular Code At It's Finest
The general rule of thumb is to create variable names that are both easy to name while semantically correct. This is fine and all when the code base is simple and small but can become increasingly difficult as it continues to grow.
In the past when I needed to make different button components, I would have something messy like the following in my global style sheet:
.btn {
...
}
.btn-home {
...
}
.btn-link {
...
}
...It works sure, but to constantly keep on creating different styles for each button purpose while maintaining semantic naming conventions is tedious.
In addition, when combined with the rest of the other styling for my project, I would probably rip my hair out 6 months down the line when looking at the gigantic global style sheet.
This is where CSS modules shine; because all class names and the likes are locally scoped to the file that it is imported to, we can split up our style sheet into individual style sheets dedicated to each component (and will only style that specific component) and reuse class names without ever having any naming collision between components!
components/
├── HomeButton/
├── HomeBtn.tsx
└── style.module.css
├── LinkButton/
├── LinkBtn.tsx
└── style.module.css
└── ...Each style.module.css will be locally scoped and called by their respective classes. This approach allows you to change the component without ever having any side effects (no changes to any other component).
Conclusion
Utilizing CSS modules can definitely ease some of the frustrations that can arise from trying to style your web pages from scratch.
However, it doesn't always need to be painful; we see that through the usage of CSS modules, we can make our code more modular by defining our styles to the local scope of each components rather than storing it all within one gigantic global style sheet.
This allows us to focus more on the development process and less on the styling headaches that come across writing CSS such as CSS specificity and semantic class names.