A CSS module is just a CSS file which 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?
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…
Take a look at the list below. The biggest CSS dangers are described here:
Thanks to the fact that CSS modules are scoped locally, the problems described above disappear.
Take a look below at a straightforward example of a CSS module in PWA Studio:
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.
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.
Take a look at the webpack configuration. In PWA Studio you can find them in @magento / pwa-buildpack / lib / WebpackTools / configureWebpack / getModuleRules.js file
On line 11 you can see where the names of the compiled classes come from, and line 12 is where the CSS modules are enabled.
CSS modules let you compose rules from other rules:
It’s possible to compose multiple selectors:
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:
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:
In PWA Studio you can pass classes as props to a component, and overwrite default component classes with classes from props. Take a look:
If you pass classes as props, you can validate them using PropTypes:
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.
You can find examples of the code for this article on my Github.Here is the repository.
Each share supports and motivates me to create new content. Thank you!
Certified Magento Full Stack Developer, based in Poland. He has 7 years of professional Software engineering experience. Privately, husband, father, and DIY enthusiast.Read more