CSS modules allow you as a programmer to write CSS with class and animation names that are scoped locally by default, in much the same way as you would write functions and use variables in Javascript. Over the next few months we’ll be looking at some specific usage cases for Modular CSS, specifically with React.JS; this week, we’re introducing the topic.

Why Use Modular CSS for React.JS?

With conventional CSS, we declare a class globally and then assign it to an HTML component manually. The browser receives both these files individually and works with them in combination; meaning that the behavior of the HTML element is hard coded with CSS classes before the code runs.

Modular CSS offers much greater flexibility than this. Primarily, it provides you with an escape from the global namespace – which can be cumbersome – as each style is scoped only to those components that are in need of it.

With the modular approach, all HTML is enclosed inside Javascript files; the modules you make will insert HTML dynamically into applications using the Javascript “innerHTML” property, and specific CSS styles will be imported in relation to each HTML component. What this means is that modular CSS allows each style you’re using to be tailored for specific HTML elements, whereas a CSS file imported in one Javascript template would not be accessible in another unless it has been explicitly imported there as well.

Modular CSS for React.JS

Since regular CSS is plain and simple to write, it allows the programmer to code easily; but as your React application grows it can become harder to know whether a specific CSS style is only affecting one component, or if there are artifacts elsewhere. Keeping things clean can be a real challenge across the whole development process; the more we need to change or tweak the components we’re working on, the more likely it is that our changes will have unintended, messy consequences elsewhere in the application, which we will need to tidy up. This is how complex development tasks get off-schedule.

The modular approach eases the process of web-app development because it makes large code-databases more manageable. Since React.JS as a library is extensive and used to make complex Javascript tasks more manageable, it’s valuable to use Modular CSS within React; the more we can structure out and simplify our code using tools, the easier it is to work with and maintain – especially if several developers may be working on a project.

Integrating CSS modules to React components is simple – as with other components, use the “import” directive, and then apply the correct class using the “className” property. The class names used in the React component are usually named according to their use because Modular CSS allows every class name to be unique.

Finally: for naming classes in React, we’ve found it valuable to use an automatic module bundler – a program that takes software components with dependencies and packages them together to form a stable module. These programs append each class name with a hash value. Each hash value is based primarily on the contents of the CSS class, so it is not possible for two classes to have the same names unless they have the same properties enclosed in them.

Let’s get started

To use CSS Modules in our app we will require quite a few loaders to load the CSS into our components. We need to add those loaders in our Webpack configuration.

What is Webpack?

Webpack specializes in asset building in the application. It is in charge of compiling our assets which can be either Javascript files, files (images) or even CSS. The details controlling how Webpack works are stored in a file named web pack.config, which has different sections for each task.

The section which we are interested in is the section for module loaders. In this section of the config file, Webpack is made aware of the modules that we will be writing in our application. Usually, module types are determined by their file extensions.

For instance, we have specified a loader for our Javascript files, having a .JS extension. We are telling web pack that all our .js files will be loaded by the Babel loader.

Modular CSS

For CSS we will use a style loader. The style loader generates code that takes CSS input and appends style element children into the actual DOM. Use NPM to install the following loaders:

  • A style loader of your choice
  • CSS
  • CssNext

Once these are installed, check the packages.json file to verify that the changes have been applied.

CSS Modular vs React

Then, update the module loader section in the config to add the CSS loaders like this:

CSS vs Javascript

In order for the loader to understand that we will use a modular approach in CSS, we need to update the config. We need to pass a configuration argument to the loader – in our case, we pass ‘?modules’ to the loader.

We also need to add an identification flag – let’s name it ‘localIdentName’ – to the config, as shown below.

React vs CSS

So let’s write a sample CSS file and name it ‘frame.css’:

Programming CSS

How it’s working underneath

At build time, the build tool will generate a hash for each of the selectors, which will be present in our web pack.config as the’ localIdentName’. This hash selector will become unique on the page. Because it’s unique per module, that means that no other module, even if it uses the same selector name, will have the same hashed selector name. Then as a React component author, when you import the CSS module, what you’re really importing is the CSS exports object. This object contains each of your original selector names as keys in the object, and the values are then associated hashed selectors. Then, when you are specifying your class name attribute, use the ‘export objects’ key; but the value that is substituted after build time and at runtime will be the hashed selector.

Simple in concept, a little detailed in execution, but incredibly powerful in effect – using Modular CSS integration can dramatically improve your work in React.JS.