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:


styled-components

image

www.styled-components.com

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.

emotion

image

emotion.sh

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.

polished

image

polished.js.org

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.

jss

image

github.com

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.

radium

image

github.com

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

aphrodite

image

github.com

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

glamor

image

github.com

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.