DEV Community


Discussion on: PostCSS with CSS Modules and React

pedrootero profile image
Pedro Otero Prada

I was looking for a way to have scoped styles that I could use by writing import styles from './my.css' and using them like className={styles.someClass}.

Without setting up anything further than was given here I made it. Any reason why you chose to use styleName? In my case, I'd rather stick to a well established attribute name. On the other hand, I can import more than one module to my components and use other styles. This is useful for when I have global styles that might apply in many places.

daveirvine profile image
Dave Irvine Author • Edited

So styleName comes from the babel-plugin-react-css-modules plugin. Stolen from their docs:

However, there are several several disadvantages of using CSS modules this way:

  • You have to use camelCase CSS class names.
  • You have to use styles object whenever constructing a className.
  • Mixing CSS Modules and global CSS classes is cumbersome.
  • Reference to an undefined CSS Module resolves to undefined without a warning.

Using babel-plugin-react-css-modules:

  • You are not forced to use the camelCase naming convention.
  • You do not need to refer to the styles object every time you use a CSS Module.
  • There is clear distinction between global CSS and CSS modules, e.g.
<div className='global-css' styleName='local-module'></div>