CSS-in-JS Roundup: Styling React Components

Together, we will look at the top 15 CSS-in-JS libraries as judged by total accumulated GitHub stars. We’ll compare their features, strengths & weaknesses. Included are some really new libraries such as emotion, as well as some of the originals, such as aphrodite.

If you’re like me, it took you a while to get on board the CSS-in-JS train. If you’re not sure what that is, then it’s worth checking out @vjeux’s original “React: CSS in JS” slides. Fast forward nearly three years, and today there is no shortage of CSS-in-JS libraries to help us style our React Components using JavaScript. In fact, at the time of writing, there are 55 such libraries listed on @MicheleBertoli’s css-in-js repo, which is a giant centralized list of libraries with individual examples of how to style a basic button in each library. Super helpful!

About every six months or so, a new library emerges. Far from eliciting JavaScript fatigue, this rate of change is very encouraging! Each new approach builds on the strengths of the previous libraries and innovates on some of the prior libraries’ shortcomings. While some of the newer libraries provide more features and performance, there is still something to be said for the longevity of some of the older libraries, which is why they are included as well. Keep that in mind when deciding on which to use for your next project.

emotion

emotion is the new kid on the block. But for its age, it not only provides an impressive array of features, but it also seems to be gaining traction extremely quickly. It is going for the sweet spot of great developer experience AND an obsession with performance. The killer feature here is the combination of both styled-components, as well as the ability to provide traditional selectors for nested components. emotion is definitely worth keeping an eye on.

• Age: 3 months
• Stars: 1.5k ⭐
• Github: https://github.com/tkh44/emotion
• Tagline: “The Next Generation of CSS-in-JS”. Emotion is a high performance, lightweight CSS-in-JS library. Emotion minimizes the runtime cost of css-in-js dramatically by parsing your styles with PostCSS during compilation instead of at runtime.
• Features: Animation, Dynamic Props, Media Queries, Nested Selectors, Pseudo Selectors, Server-Side Rendering, Style Any Component, Theming

glamorous

glamorous wraps the popular glamor library and provides a styled-component-like experience but using JavaScript syntax rather than interpolated strings. Dynamic props are a big win for this library over others, as is themeing. If you want to experiment with creating styled React components using JavaScript syntax, glamorous might be right for you.

• Age: 6 months
• Stars: 2k ⭐⭐
• Github: https://github.com/paypal/glamorous
• Tagline: Maintainable CSS with React
• Features: Dynamic Props, Media Queries, React Native, Server-Side Rendering, Style Any Component, Theming

styled-jsx

styled-jsx allows you to add <style jsx /> tags inside your Components’ render functions. This allows you to write styles in plain CSS with the added benefit that the CSS inside of these is only applied to the current scope of the DOM being rendered at that level. If you would like to comingle your CSS inside your render function, styled-jsx has your name all over it.

• Age: 9 months
• Stars: 2k ⭐⭐
• Github: https://github.com/zeit/styled-jsx
• Tagline: Full, scoped and component-friendly CSS support for JSX (rendered on the server or the client).
• Features: Animations, Dynamic Props, Server-Side Rendering, Theming

jsxstyle

jsxstyle allows you to forget thinking about the HTML elements that you use simply for styling purposes (e.g., <div />, <span />, <table />, etc.), and instead use these styled components (<Block />, <Flex />, <Inline />, <Table />, etc.). It also disregards many of the norms of CSS, and instead provides an interesting developer experience of being able to specify psuedo-selectors as props (e.g., hoverColor). If you are looking to remove the tedium of writing <div className={styles.container} /> for the 100th time, you should check out jsxstyle.

• Age: 9 months
• Stars: 1.5k ⭐
• Github: https://github.com/smyte/jsxstyle
• Tagline: jsxstyle is intended to be the best way to style React components. It has the goals of having a best-in-class developer experience without sacrificing performance, and has little regard for existing CSS orthodoxy
• Features: Pseudo Selectors

TypeStyle

TypeStyle is the TypeScript of CSS – hence the name. The focus is on compile-time linting, autocomplete, etc. to ensure a good developer experience and protect against runtime issues. Best of all, it’s framework agnostic, so you could learn it once and use it anywhere. If you are already a TypeScript fan, then TypeStyle is worth a look.

• Age: 9 months
• Stars: 1.5k ⭐
• Github: https://github.com/typestyle/typestyle
• Tagline: Writing CSS with TypeStyle will be just as fluent as writing JavaScript with TypeScript.
• Features: Animations, Media Queries, Pseudo Classes, Server Side Rendering

styled-components

Far and away the most popular of the CSS-in-JS libraries, styled-components flips the problem on its head. Rather than adding styles to existing components, you instead create components that embody the styles. This allows for declarative and reusable components that are halfway between a regular HTML element and a fully-fledged React Component. This philosophy, as well as the GraphQL-esque string interpolation, take a bit of getting used to, but seeing as it’s nearly twice as popular as the second-place CSS-in-JS library, it’s safe to say there’s something here worth looking at.

• Age: 1 year
• Stars: 9.5k ⭐⭐⭐⭐⭐⭐⭐⭐⭐
• Github: https://github.com/styled-components/styled-components
• Tagline: Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
• Features: Animation, Dynamic Props, Media Queries, Nested Selectors, Server-Side Rendering, React Native, Style Any Component, Theming

glamor

The real power of glamor is in its ability to allow you to write and combine CSS rules. Usually, extending / overwriting CSS-in-JS rules can be a hassle; however, glamor lets you either splat them sequentially inside a Component’s props, or list them inside its className. If you are looking for a trusted “what you expect” library, then look no further than glamor.

• Age: 1 year
• Stars: 2.5k ⭐⭐
• Github: https://github.com/threepointone/glamor
• Tagline: Inline css for react et al
• Features: Media Queries, Nested Selectors, Pseudo Selectors, Server-Side Rendering, React Native, Style Any Component, Theming

styletron

styletron’s claim to fame is its speed, derived from its use of “Virtual CSS” (like the “Virtual DOM”) which abstracts away the conversion of JS-to-CSS in order to provide optimizations, speedups, dead CSS pruning, etc. Of particular focus is minimizing injected CSS on server-side rendering for fast page load times. If you are looking for a good developer experience which provides a huge boost in speed, start by looking at styletron.

• Age: 1 year
• Stars: 2k ⭐⭐
• Github: https://github.com/rtsao/styletron
• Tagline: Universal, high-performance JavaScript styles.
• Features: Animation, Dynamic Props, Media Queries, Server-Side Rendering, Style Any Component

Radium

radium was one of the original CSS-in-JS libraries which seeks to solve the issue of handling media queries, pseudo selectors, and modifiers. It is still one of the most popular libraries out there, which speaks to its practicality and longevity.

• Age: 2 years
• Stars: 5.5k ⭐⭐⭐⭐⭐
• Github: https://github.com/FormidableLabs/radium
• Tagline: Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.
• Features: Animation, Media Queries, Pseudo Selectors, Server-Side Rendering, Style Any Component, Theming

React CSS Modules

react-css-modules is close as it gets to being able to write pure CSS in your React Components. Literally, you import .css files and use their keys in the className prop. As one of the first CSS-in-JS libraries, the main problem it was trying to solve was scoping CSS selectors. It’s worth seeing whether babel-plugin-react-css-modules would meet your needs. Although it has fewer features, it is a much smaller package, and much more performant.

• Age: 2 years
• Stars: 4k ⭐⭐⭐⭐
• Github: https://github.com/gajus/react-css-modules
• Tagline: React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global unique name. CSS Modules enable a modular and reusable CSS!
• Features: Nested Selectors, Pseudo Selectors

Aphrodite

aphrodite is written and maintained by the good folks at the Khan Academy. As one of the original CSS-in-JS libraries, the primary problem it was trying to solve was getting CSS-parity but using JavaScript syntax. As such the focus is on selectors, media queries, animations, etc. If you are looking for a respected library which has the longevity of an established maintainer, aphrodite might be anchor in the storm of JS libraries.

• Age: 2 years
• Stars: 3.5k ⭐⭐⭐
• Github: https://github.com/Khan/aphrodite
• Tagline: Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
• Features: Animation, Dynamic Props, Media Queries, Server-Side Rendering

ReactCSS

As one of the original CSS-in-JS libraries, reactcss focus was on dynamically swapping styles based on props. While this is a feature that many newer libraries, it should be noted that this was a feature ahead of the curve back in the day. It is still worth looking at, especially if need full CSS support (including Autoprefixing) or React Native support.

• Age: 2 years
• Stars: 1.5k ⭐
• Github: https://github.com/casesandberg/reactcss
• Tagline: Inline Styles in JS with support for React, React Native, Autoprefixing, Hover, Pseudo-Elements & Media Queries
• Features: Dynamic Props, Media Queries, React Native

👉 Big thank you to @MicheleBertoli and all the other contributors to css-in-js.