Embracing the power of styled-components

What we learned in the first week moving away from CSS Modules

We have a React application made of dozens of components. After working with CSS modules for a while, we decided to give styled-components a try. It is another effort to simplify the development experience.

Styled-components are defined as visual primitives for the component age. They let you use the best bits of ES6 and CSS to style your apps without stress. To put it in a nutshell, it replaces how you write CSS in your application.

There is a repository with a comparison of all the strategies to write the styles for components. In the past, we thought about moving to the inline-styles strategy but we didn’t make the move since it involves writing non-standard CSS.

As I mentioned before, we have been using CSS Modules for a while and they were working just fine. That said, there are some drawbacks:

• The components need to be mapped to another file (JS file → CSS file)
• The CSS needs to import shared styles (ex. colors.css)
• In both the component and the CSS, we are using long class names that are used only once (do we need that class if it’s only used once?)

The benefits

After moving some of our code from CSS Modules to styled-components, we immediately found some benefits:

1. It enforces you to write smaller components

Start by removing the class names and replace them with meaningful styled components names. Instead of writing a div with a class name, create a styled component.

Even though you can avoid writing long class names, keep in mind that you will be adding all the styles in the same JavaScript file. Depending on the component, this may add from 20 to more than 100 lines. The moment you notice that you have too many styles, the component is telling you that is time to break it down into smaller components.

2. It gives you access to your style guide without the need of imports

Styled components have full theming support by exporting a Theme Provider wrapper component. This provides a theme object to all React components via the context API. In the render tree, all styled-components will have access to the provided theme, even when they are multiple levels deep.

To solve the problem of duplicated styles and the need to import every shared style, we started using the theming feature. This allows you to have the full style guide definitions in an object:

Now we can use the style guide directly in any component. In the example below we directly access a color defined in our style guide without the need of importing any file:

3. You end up having less and more consistent files

By removing all the CSS files that are mapped to each component, you will be removing a lot of files.

Imagine a view that requires two different stylesheets. If you refactor the view and forget to add both, the view styles will be broken. Themes help you fix this problem since all the shared styles will be ready to use without the need for imports.

If you’re writing React, you have access to a more powerful styling construct than CSS class names. You have components. — Michael Chan, @chantastic

Since you have the full logic and presentation without other linked files, you can be confident that the component will work as expected just by itself.

Conclusion

We are still in the middle of the transition between CSS modules and styled-components. So far the journey has been great, but there is more to learn once we face new challenges. Give it a try and share your experience!