The most immediate benefit is never having to think about and munge class names. Your Button.scss would typically look like: .Button { ... } .Button--

The most immediate benefit is never having to think about and munge class names. Your Button.scss would typically look like: .Button { ... } .Button--primary { ... } .Button--small { ... } .Button--alt { ... } And then you need to repeat all those in Button.js (but really they're globals and anything could be using them...) return ( <button className={classnames('Button', { 'Button--alt': props.alt, 'Button--primary': !props.secondary, 'Button--small': props.small, }, props.className)}> Click Me </button> ) (I even skipped over the very first issue you run into, which is building up the className string, which is why people use the classnames helper everywhere.) And that's the simple case with only one child component – usually there are even more dynamic class names to consider for all the possible states, and other children that need their own classes as well. Once you use a solution like Styled Components, building up classes using that damn classnames helper just seems so primitive and tedious. The duplication involved in keeping selectors from the CSS in sync with those actually used in the components also drives me nuts.