The best React CSS in JS library is Emotion.

Emotion is able to do everything other CSS-in-JS libraries can do, and more. It's supremely flexible - it gets out of your way so you can write your CSS-in-JS just the way you want to. In that way it's extremely flexible and un-opinionated on how you write your styles.

Conversely Emotion is highly opinionated on how your styles are compiled and rendered in your app. This is the area where you want the library to be opinionated as Emotion has managed to make all the confusing parts of CSS reliable and deterministic. Such as the cascade of styles, or the order in which styles are applied to the page, or any other weird edge cases that can cause your page to not look the way you expect it to.

Emotion's biggest weakness is its documentation. They're sparse (compared to other libraries) and disjointed. Concepts that are related are spread across multiple pages and it's not always immediately evident how different features interact and impact one another.

Additionally it can be difficult to get started with Emotion due to its extreme flexibility. You can write your styles with styled components, or you can write them with the css prop, or you can write them as a template literal, or you can write them as an object - the sheer amount of options are overwhelming! Especially when getting started!

However once you gain comfort with Emotion you start to feel its strength and power. Depending on the context of where you're writing your styles you have so many options that fit that need best, making Emotion an absolute joy to use.

What is CSS in JS?

CSS in JS is largely a React concept, due to React's extreme reliance and usage of JavaScript.

React introduced JSX which brought templating into JavaScript. No longer did you have to keep a separate .html file, you were now able to inline that UI directly into your functional UI component.

Bundling UI into JavaScript brought many advantages - primary amongst them was the tooling that could be introduced that vastly improved the developer experience - orphaned templates were gone, and it completely opened the door for statically analyzing your UI.

CSS in JS brings CSS into JavaScript, bringing with it the same advantages enjoyed when UI was brought into JavaScript.

Basically it means you write your CSS inside your React Components, which are JavaScript files.

What are the advantages of CSS in JS?

The biggest advantage of CSS in JS is never having dead CSS styles.

All CSS in JS is scoped to its usage - meaning that some styles applied to one <a /> are not shared with all anchor elements. If you want to make some styles global you can, but that becomes an opt-in behavior instead of an opt-out.

This means that as your application grows, once you find yourself no longer using some component, you can delete that file and when you do all its related styles are deleted. Most importantly, you can delete those styles with confidence they'll have no impact across your entire application.

As I like to cheekily think of it, CSS-in-JS takes the C (cascade) out of CSS. It removes the default global behavior of CSS and for web applications that's extremely powerful.

Runner-up library: Styled Components

Styled Components is probably one of the best known CSS in JS libraries.

When it was first released it was a revelation - it inverted the way developers expected to write CSS. Rather than adding CSS to a component, Styled Components instead asked you to write components that were just meant to be CSS.

Rather than adding a blue background to a button, you made a Styled Blue Button Component.

The documentation for Styled Components is one of its greatest strengths. They're clear and gradually walk you through all the use-cases you may have. There's an advanced section as well which clearly explains edge-cases and how you can do them the Styled Components way.

However Styled Components only allows you to write Styled Components. Unlike Emotion, attaching arbitrary CSS to any element is not possible.

Styled Components is great for beginners as it has tight and clear guard rails, but when you actually want flexibility, that's when Emotion becomes a better choice.

Does CSS in JS have trade-offs?

The biggest down-side to most CSS in JS libraries is that they incur a run-time cost.

This means that when your application is rendered in the browser these libraries have to inject your styles into the page so that your styles are applied.

This cost is largely imperceivable and has no impact on real world performance, but it does exist.

However there are some libraries that compile your styles ahead of time and produce a regular .css file that is rendered like normal.

The best option for a zero-runtime CSS in JS library is linaria.

When should you use CSS in JS?

CSS in JS is best used for large web applications that are developed by large teams. That isn't to say small apps with small teams won't benefit, but the benefits of CSS in JS will be more strongly felt by larger teams.

There is a learning curve to CSS in JS but a small one. If you know CSS and if you know JavaScript, merging those concepts together should not take a lot of time.

As web applications grow in size it becomes harder to know how CSS impacts your styling. CSS in JS makes CSS maintainable.