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)

CSS-in-JS

Rankings

Usage by Years Of Experience

Usage by Salary Range

Styled Components

Links

Glamor