Getting started with CSS modules in React

Last updated 1 year ago by Neo Ighodaro

react

When building React applications (or any application actually), we need it to look great. For web applications, the standard beautification language is called CSS. Since the age of the dinosaurs, properly structuring CSS styles and arranging them has always been a problem.

In small apps this is not really a problem, but with applications of larger structure things are bound to get real hazy. With CSS Modules we can modularize things in React and add some structure to the flow.

In this article we will explore how we can use CSS Modules in React to make maintaining our CSS files way easier and more modular.

Let’s have a real look at the problems we are trying to solve.

CSS at scale

CSS has always been easy and flexible, but then this really cool technology doesn’t really lend itself to scalability. With large projects that have extended sections and features, it becomes a real menace to deal with.

At scale these problems become real (scale here referring to a codebase with many developers working on it), but then there are a couple of problems that we have to take into account and make sure we understand before we attempt to solve them.

Some of the problems are:

  • Global ~~warming~~ namespaces.
  • Dead code elimination.
  • Dependencies.
  • Conditionals.

Global namespaces

CSS is a language of globals. In most languages, global variables are considered bad and taking into account we have CSS styles mostly specific to our components, it’s obvious that globals are bad (there are cases when using global CSS is okay though).

Global CSS can easily rewrite styling in other classes. A change in the style in one class can ultimately and silently change the UI on multiple components. Generally, no one wants that to happen when they develop apps.

Dead code elimination

Most times while building apps, we have styling that is redundant or no longer in use. Although they can be small at first, overtime it builds up and we have rogue and unused CSS everywhere and it can cause unnecessarily large file sizes.

With CSS modules, we get to only import styles we use. therefore reducing redundancy and the increase our ability to spot CSS that is not being used.

Read full Article