React components are the building blocks of our applications’ UI in 2020. As visual elements, styling them is a big part of how applications actually meet our users, and composes the way our brand and product looks and feels.

Choosing the right method for styling components isn’t an absolute truth. It’s a relative choice that should serve your use case, personal preferences and above all architectural goals of the way you work: Global namespacing, dependencies, reusability, scalability, dead-code elimination and so on.

In this post, we’ll review useful ways to style your React components facing 2020 and try to understand what sets them apart. The choice is yours, and please feel free to add your own experience, insights, and suggestions.

Tip: Easily reuse React components across apps using Bit (GitHub). Build faster, alone or as a team, keep your UI consistent and your users happy. It even works with GitHub and NPM to enhance your workflow. Try it free.

Easily reuse components across apps, stay in sync

1. Inline CSS

React lets you add CSS inline, written as attributes and passed to elements.

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style’s value, usually a string.

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. For example:

You can pass the styling directly or create a variable that stores style properties and then pass it to the element. With inline styles, you also have the option to combine CSS syntax with JSX code (a preprocessor step that adds XML syntax to JavaScript).

This approach makes it easier to colocate styles in components and understanding what styles each component has. Leveraging the abilities of JS also makes it easier to work with more complex styling when needed.

2. CSS in JS

A particularly interesting concept is using CSS in JS to abstract CSS to the component level itself, using JavaScript to describe styles in a declarative and maintainable way. With the release of the popular styled-components project by Max Stoiber, this concept is more mainstream today than ever (see below).

So what’s the difference between CSS-in-JS and Inline styles? let’s take it to the ground level. Here’s a simple explanation that makes things clearer at the most down-to-earth level possible: CSS-in-JS attaches a <style> tag on top of the DOM while inline styles just attaches the properties to the DOM node.

In React, CSS-in-JS lets you think and design styles in abstraction in the component level, leveraging the principles of modularity and isolation, unit-testing, DRY principle and so on. It’s a mind-bender, but often a practical one.

Note that the official React docs still state that “React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate *.css file as usual and refer to them using className .”

Comparing CSS-in-JS libraries for React

Here are a few of useful links for comparing CSS in JS libraries in the open source ecosystem. Feel free to comment and add your own insights.

3. Styled Components