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.
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.
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.
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.
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 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:
Once these are installed, check the packages.json file to verify that the changes have been applied.
Then, update the module loader section in the config to add the CSS loaders like this:
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.
So let’s write a sample CSS file and name it ‘frame.css’:
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.