I started my engineering career as a front-end developer when being front-end developer meant slicing PSDs to HTML trying to figure out the best way to implement crazy glassy and shadowy designs without transparent PNG support in IE6.

Starting using CSS Modules "properly" with custom built UI components library was definitely the biggest single improvement in easiness of delivering stuff I've experienced across the "whole stack", from the hosting situation, DBs, through popularization of MVC on the server and client side, micro-services to react itself.

Please do give a try. :)

One rule of thumb I passed on my friend learning working with CSS Modules: Never share styles between components.

Sometimes it's very tempting but instead try to compose your components in different ways.

You might want to share style or create mixin for white box with a border and shadow for 2 very similar components. Creating WhiteShadowedBox component even if it's a div with 3 lines of CSS is fine and will save a some headache later. Of course needs a better name. ;)

It's fine to use variables and mixins for "style config" like colors, font definitions, margin scales (0.8rem, 1.2rem, 1.6rem) etc but in my experience not much more.

I wrote a bit[1] about CSS Modules with React, but interestingly it looks like CRA isn't using babel-plugin-react-css-modules so I'm trying to figure out what they're doing instead.

[1] https://dev.to/daveirvine/postcss-with-css-modules-andreact-...

It's perfectly fine to just use css-loader to handle CSS modules. No need for babel. Just do:

   import styles from "./style.css";

   <Component className={styles.myClassName} />

I can't imagine using anything other than styled-components... Are there advantages to using CSS Modules instead?

Every time I look at the docs for another styling solution I just see unnecessary complexity for no clear benefit. Styled components are so easy to reason about and organize, especially when doing conditional / state based styling.