A CSS module is just a CSS file that gives you the possibility to style components. The most important advantage of CSS modules is that the styles are scoped locally by default, but what does this actually mean?
CSS is easy, right?
I started my web developer journey as a frontend developer, and with time I also started to deal with backend employees. My colleagues from the backend team were laughing that CSS is just a language for just setting margins and colors.
Keep in mind: if you do something more than adding color to headings…
CSS is not easy.
Take a look at the list below. The biggest CSS dangers are described here:
Conflicts between CSS rules
Overwrites
A big CSS stylesheet with unused rules
Side effects
CSS modules to the rescue
Thanks to the fact that CSS modules are scoped locally, the problems described above disappear.
no more conflicts
no side effects
no global scope
An example CSS module
Take a look below at a straightforward example of a CSS module inPWA Studio:
1import React from"react";
2import classes from'./sample-component.css';
34const SampleComponent = () => {
5return (
6<divclassName={classes.section}>7<h3className={classes.heading}>This is the sample component tilte</h3>8<p>This is the sample component paragraph</p>910<h4className={classes.heading}>This is the sample list:</h4>11<ul>12<li>Sample item A</li>13<li>Sample item B</li>14<li>Sample item C</li>15</ul>16</div>17 )
18};
1920exportdefault SampleComponent;
On the third line, we imported a CSS module called sample-component.css as a classes object. Now we are able to use classes from the CSS module as object properties. Take a look at lines 6,7, and 10.
So this is exactly what CSS modules do—they let you use CSS classes as object properties in JSX files.
How does it work?
Thanks to Webpack and the configuration of the loaders, the classes described in the CSS module, and applied in the React component, are rendered as unique CSS classes for each place where they are used.
Here is the place where the section class is applied to the node.
This is a CSS rule which includes CSS properties.
Here you can see a unique class name applied to the node in the compiled app.
This is compiled into a unique CSS rule.
Webpack configuration
Take a look at the webpack configuration. In PWA Studio you can find them in @magento / pwa-buildpack / lib / WebpackTools / configureWebpack / getModuleRules.js file
Scoping styles locally is lovely, but sometimes you need to define some global CSS rules, for example for animations (keyframes). CSS modules let us create global rules using the :global() function.
When you import this CSS module into your app, you will be able to use a global CSS rule like this:
1// import stylesheet2import'./global-styles.css'3...
4// example of using global CSS rule5<p className="global-class-name">This is paragraph withglobal styles appiled</p>
Composing from global
Sometimes it is necessary to compose from a global rule to a local one, which you can do like this:
It’s recommended to use the camel case naming convention because using classes in JS, in this case, is easiest. When the name of the class looks. for example, like this: .my-sample-class, then you can apply this class to an element in the following way:
1<ul className={classes['my-sample-class']}>
Merging and overrides classes
In PWA Studio you can pass classes as props to a component, and overwrite default component classes with classes from props. Take a look:
In my opinion, locally scoped CSS resolve many problems and is a really nice, modern approach to managing styles. Perhaps for many Frontend Developers, this is a controversial approach, and that’s OK because this is completely different from what is commonly used.
Maybe you have experience with CSS modules? Let me know in the comments!
Thanks for reading. All likes, shares, and comments are really appreciated.
Each share supports and motivates me to create new content Thank you!
About the author
Marcin Kwiatkowski
Frontend developer, Certified Magento Full Stack Developer, writer, based in Poland. He has eight years of professional Software engineering experience. Privately, husband and father. He likes reading books, drawing, and walking through mountains.