styled-components & functional CSS

[gillchristian]

First of all thanks for putting this out. Really inspired (and the team I'm part of) me on the way I write CSS.

Currently we are using functional CSS and some BEM here and there, but we are moving to styled-components because we believe in reusing styles by reusing components and not classes, and so if the mapping between class and component is 1 to 1, why have the class anyways right? That's basically @mxstbr selling point on styled-components.

Do you have any recommendations on how to do functional CSS with styled-components? Basically I don't want to be creating a lot of ad-hoc styled components but be able to reuse them, and also do not repeat the same CSS rules in many components (your point in this article).

This is what I've found until now:

• Extending: withComponent, StyledComponent.extend and styled(Component).
• @jxnblk great work on Rebass, grid-system and styled-system.

Is there something else you would recommend?