The State of CSS 2019: CSS-in-JS

English

CSS-in-JS

CSS-in-JS has been one of the biggest developments of the past few years in the CSS world. Just like preprocessors bypassed CSS to introduce their own set of new features over a decade ago, CSS-in-JS libraries piggyback on JavaScript's power to make their own path without waiting for CSS to catch up.

But while some libraries like Styled Components and Emotion have established themselves as solid options, the overall ecosystem is still very fragmented and in constant movement. So it remains to be seen what place CSS-in-JS will occupy in the overall ecosystem in the long run.

One thing is sure though: more competition is always good, and if CSS can steal some of its JavaScript cousin's freshest ideas then we'll all be better off for it!

Rankings

Awareness, interest, and satisfaction ratio rankings. Note that these three ratios all correspond to the same point in time.

Awareness (Total Respondents - Never heard)/Total Respondents

Interest Interested/(Interested + Not interested)

Satisfaction Would use again/(Would use again + Would not use)

Usage by Years Of Experience

The “overall” column shows overall usage for each technology (respondents who selected “would use again” or “would not use again”), while the following columns show the usage ratio for each “years of experience” bracket.

A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.

Years of Experience

Styled Components

36.1%

27.75%

36.68%

43.26%

41.3%

35.84%

31.76%

CSS Modules

21.71%

13.66%

19.12%

26.73%

27.62%

22.91%

20.24%

Styled JSX

12.33%

7.05%

13.79%

14.2%

13.99%

12.73%

12.24%

Emotion

5.96%

0.88%

5.85%

8.04%

8.48%

7.34%

5.18%

JSS

5.86%

2.2%

7.31%

7.29%

7.26%

5.71%

5.41%

Glamor

3.86%

0.88%

2.61%

5.03%

5.35%

5.55%

3.76%

Radium

2.09%

0.88%

1.57%

2.05%

3.07%

1.88%

Aphrodite

1.88%

0.44%

1.15%

2.09%

2.6%

2.64%

2.35%

Difference from overall usage:

-20%-10%0+10%+20%

Usage by Salary Range

A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.

Salary Range (USD)

Styled Components

38.08%

30.39%

32.26%

36.18%

40.11%

40.47%

48.82%

38.35%

CSS Modules

25.92%

16.51%

15.12%

22.02%

23.78%

25.69%

35.47%

42.86%

Styled JSX

13.87%

11.82%

10.83%

11.14%

13.98%

14.13%

17.14%

18.05%

Emotion

8.79%

5.07%

4.29%

5.31%

6.34%

7.94%

13.78%

18.8%

JSS

7.71%

5.63%

6.44%

6.39%

6.8%

8.67%

15.04%

Glamor

5.82%

2.38%

3.22%

4.57%

5.34%

8.67%

13.53%

Radium

3.67%

2.25%

1.79%

1.33%

2.17%

2.54%

5.05%

10.53%

Aphrodite

3.26%

0.38%

0.83%

1.28%

2.04%

2.6%

4.43%

11.28%

Difference from overall usage:

-20%-10%0+10%+20%

Styled Components

Completion Percentage: 98.48% (11145)

Percents%CountΣ

I've USED it before, and WOULD use it again33.17%

I've USED it before, and would NOT use it again5.88%

I've HEARD of it, and WOULD like to learn it26.23%

I've HEARD of it, and am NOT interested12.53%

I've never heard of it20.66%

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Glamor

Completion Percentage: 97.79% (11067)

Percents%CountΣ

I've USED it before, and WOULD use it again2.7%

I've USED it before, and would NOT use it again2.21%

I've HEARD of it, and WOULD like to learn it9.18%

I've HEARD of it, and am NOT interested14.2%

I've never heard of it69.5%

inline css for react et al

Aphrodite

Completion Percentage: 98.49% (11146)

Percents%CountΣ

I've USED it before, and WOULD use it again0.74%

I've USED it before, and would NOT use it again1.55%

I've HEARD of it, and WOULD like to learn it4.79%

I've HEARD of it, and am NOT interested11.55%

I've never heard of it79.86%

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

JSS

Completion Percentage: 98.5% (11147)

Percents%CountΣ

I've USED it before, and WOULD use it again3.92%

I've USED it before, and would NOT use it again2.71%

I've HEARD of it, and WOULD like to learn it9%

I've HEARD of it, and am NOT interested14.74%

I've never heard of it68.13%

JSS is an authoring tool for CSS which uses JavaScript as a host language.

Styled JSX

Completion Percentage: 98.1% (11102)

Percents%CountΣ

I've USED it before, and WOULD use it again9%

I've USED it before, and would NOT use it again4.41%

I've HEARD of it, and WOULD like to learn it13.39%

I've HEARD of it, and am NOT interested16.67%

I've never heard of it54.64%

Full CSS support for JSX without compromises

Radium

Completion Percentage: 98.04% (11095)

Percents%CountΣ

I've USED it before, and WOULD use it again0.68%

I've USED it before, and would NOT use it again1.88%

I've HEARD of it, and WOULD like to learn it3.89%

I've HEARD of it, and am NOT interested11.03%

I've never heard of it80.56%

A toolchain for React component styling.

Emotion

Completion Percentage: 98.86% (11188)

Percents%CountΣ

I've USED it before, and WOULD use it again6.49%

I've USED it before, and would NOT use it again1.01%

I've HEARD of it, and WOULD like to learn it10.89%

I've HEARD of it, and am NOT interested8.39%

I've never heard of it72.09%

👩‍🎤 CSS-in-JS library designed for high performance style composition

CSS Modules

Completion Percentage: 98.88% (11190)

Percents%CountΣ

I've USED it before, and WOULD use it again21.11%

I've USED it before, and would NOT use it again3.52%

I've HEARD of it, and WOULD like to learn it30.29%

I've HEARD of it, and am NOT interested7.71%

I've never heard of it36.25%

Documentation about css-modules

Recommended Resources

Learn to Build Scalable React Applications (Includes Using Emotion with React)

You’ll learn hooks in-depth, CSS-in-JS with Emotion, increase performance, add TypeScript and test your App!

Thanks to our partners for supporting us! Learn more.

« Previous: Methodologies Next: Other Tools »

CSS-in-JS

Rankings

Usage by Years Of Experience

Usage by Salary Range

Styled Components

Links

Glamor

Links

Aphrodite

Links

JSS

Links

Styled JSX

Links

Radium

Links

Emotion

Links

CSS Modules

Links

Recommended Resources

Learn to Build Scalable React Applications (Includes Using Emotion with React)