Another way to modularize your CSS is using CSS modules. This allows styling your React components with regular CSS (or Sass, Less, Stylus), without the worry about issues related to conflicting class selectors and it allows you reduce global styles to a minimum and even eliminate them completely.

With CSS modules, everything you write in CSS files is local by default; each file is compiled separately, so you can use simple class selectors with generic names--no need to worry about polluting the global scope.

Let's say we're building a simple button component, which may have different states (default, disabled, in-progress, and so on). Before CSS modules, we would need to use the BEM naming convention, to make sure that our CSS classes don't cause problems with other UI elements:

components/Button/Button.scss

.Button { /* all styles for default state */ } 
.Button-icon { /* styles for a child element */ } 
.Button--disabled { /* overrides for disabled state ...