Do You Really Need react-css-modules?
Disclaimer: This article is in no way meant to belittle the react-css-modules project, or its author. Gajus is a smart dude and does a lot of great work for free for the JavaScript community to enjoy! ❤️ This is merely an evaluation of this particular library.
As with many popular frontend libraries, I’m sure “react-css-modules” had a valid use-case at the time it was created, but at the present, it’s drawbacks far outweigh its benefits. This article is meant to be a warning against picking it up without thinking about what you get from it.
tl;dr: Use “css-loader” over “react-css-modules”/”babel-plugin-react-css-modules” because the latter relies on side-effects, adds cognitive overhead (too much 🦄 ), causes React errors in your tests, requires complex webpack config, requires an additional dependency, is slower than css-loader, and doesn’t work with webpack/babel
importaliases.
“PROs”*
Throws error when trying to use an undefined class name.
Only actual pro IMHO.
You don’t have to use the styles object whenever constructing a className.
Why is explicitness a bad thing?
Mixing CSS Modules and global CSS classes is easy.
Yeah, the “css-modules” example is slightly more involved, but if you’re using the fantastic (and tiny) classnames lib, you can simplify the “css-modules” example to:
You don’t have to use camelCase CSS class names.
Okay, sure, but the same is true for “css-loader.” It has a camelCase option which converts kabab-case’ed class names to camelCase.
CONs
Relies on side-effects
Where does
"myClass"come from? Why am I not using the./styles.scssimport?
Adds magic and cognitive overhead
What’s the difference between className and styleName? Why are there both?
Causes React warnings about unrecognized property name (styleName) for native DOM elements
Requires pretty convoluted webpack config
Requires an additional dependency
You’re already using “css-loader” if you are importing css in your app, which already works for css modules out of the box. Why add another dependency?
Slower than using css-loader directly
Doesn’t work with webpack aliases (or babel-plugin-module-resolver)
There you have it, folks. react-css-loader makes your code more difficult to reason about, litters your console with React warnings, requires complex webpack configuration, and slows your code down. All for questionably “cleaner” code, and to get errors when trying to import a classname that doesn’t exist. I don’t think it’s worth the fuss. 🤷🏻 But feel free to correct me in the comments. :)
