image

CSS-in-JS libraries

Styling techniques where CSS is composed using JavaScript instead of defined in external files

CSS-in-JS was born to abstract away many complicated CSS concepts like cascading, specificity, naming selectors, enforcing naming conventions, enforcing file structures, preprocessors.

There are many CSS-in-JS techniques out there with different quality, you can try any of them for fun but definitely should only use popular ones for production. Following libraries are well developed and maintained by community:


image

styled-components

By far this library is the best and most loved solution with more than 25k stars on GitHub. I’ve been using it for 2 years and the experience is more than satisfied. The ecosystem of styled-components is getting bigger, you simply just can’t stop using it.

image

emotion

The second best solution with 9k stars. This one focuses on performance and flexibility; It allows you to style apps quickly with string or object styles.

image

polished

A lightweight tool set for writing styles in JavaScript. No matter if you’re using styled-components, emotion, jss, aphrodite, radium, or plain inline styles, as long as you’re writing your styles in JavaScript you can use polished.

image

jss

An authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node. JSS is framework agnostic, you can use along with other frameworks using adapters like styled-jss or glamor-jss.

image

radium

A set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.

image

aphrodite

A framework-agnostic CSS-in-JS library with support for server-side rendering, browser prefixing, and minimum CSS generation.

image

glamor

A small, fast, efficient, framework independent CSS-in-JS library. It lets you write inline CSS in your components using the same Object CSS syntax React supports for the style prop.