Styled Components: Enforcing Best Practices In Component-Based Systems

About The Author

Max works as an open source developer at Thinkmill, where he takes care of KeystoneJS and ElementalUI. He’s also the creator of react-boilerplate, the … More about Max ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

The rise of JavaScript frameworks such as React, Ember and recently Angular 2, the effort of the W3C to standardize a web-native component system, pattern libraries and style guides being considered the “right way” to build web applications, and many other things have illuminated this revolution.

After this shift in mindset towards building component-based user interfaces, we are now in what we like to call the “component age.” The rise of JavaScript frameworks such as React, Ember and recently Angular 2, the effort of the W3C to standardize a web-native component system, pattern libraries and style guides being considered the “right way” to build web applications, and many other things have illuminated this revolution.

Styled Components - A screenshot of styled-components code
A Button React component written with styled components. (View large version)

Best Practices In Component-Based Systems

As we’ve built more and more apps with components, we’ve discovered some best practices when working with them. I want to talk about three main ones today: building small, focused and independent components; splitting container and presentational components; and having single-use CSS class names.

Build-Small Components

Instead of relying on classes for composition, use components to your advantage and compose them together. For example, imagine a Button component that renders