CSS-in-JS

Libraries that help integrate CSS into JavaScript code.

SatisfactionS
InterestI
UsageU
AwarenessA

Satisfaction, interest, usage, and awareness ratio rankings.

Technologies with less than 10% awareness not included. Each ratio is defined as follows:

  • Satisfaction: would use again vs would not use again.
  • Interest: want to learn vs not interested.
  • Usage: would use again + would not use again vs awareness.
  • Awareness: total - never heard.

Overview of opinions on the technologies surveyed over time.

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Technologies with only one year of data are not included.

This chart splits positive (“want to learn”, ”would use again”) vs negative (“not interested”, “would not use again”) experiences on both sides of a central axis.

Bar thickness represents the number of respondents aware of a technology.

Styled Components
Completion percentage: 80.5% (9255)
Completion percentage: 80.5% (9255)

Export
Percents%
CountΣ

2019

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

JSS
Completion percentage: 80.6% (9267)
Completion percentage: 80.6% (9267)

Export
Percents%
CountΣ

2019

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Styled JSX
Completion percentage: 80.8% (9282)
Completion percentage: 80.8% (9282)

Export
Percents%
CountΣ

2019

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Radium
Completion percentage: 80.6% (9264)
Completion percentage: 80.6% (9264)

Export
Percents%
CountΣ

2019

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Emotion
Completion percentage: 80.8% (9281)
Completion percentage: 80.8% (9281)

Export
Percents%
CountΣ

2019

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

CSS Modules
Completion percentage: 80.9% (9293)
Completion percentage: 80.9% (9293)

Export
Percents%
CountΣ

2019

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Styled System
Completion percentage: 80.6% (9268)
Completion percentage: 80.6% (9268)

Export
Percents%
CountΣ

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم
We asked members of the CSS community to share their “pick of the year”

My 2020 Pick: Fela

Fela is an amazing piece of software. It’s pretty powerful, relatively easy to use and very performant

We asked members of the CSS community to share their “pick of the year”

Hugo “Kitty” Giraudel

Non-binary accessibility & diversity advocate

Stitches
Completion percentage: 80.7% (9270)
Completion percentage: 80.7% (9270)

Export
Percents%
CountΣ

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Styletron
Completion percentage: 80.8% (9281)
Completion percentage: 80.8% (9281)

Export
Percents%
CountΣ

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Fela
Completion percentage: 80.8% (9284)
Completion percentage: 80.8% (9284)

Export
Percents%
CountΣ

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Linaria
Completion percentage: 80.7% (9277)
Completion percentage: 80.7% (9277)

Export
Percents%
CountΣ

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Astroturf
Completion percentage: 80.7% (9271)
Completion percentage: 80.7% (9271)

Export
Percents%
CountΣ

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Other Tools
Completion percentage: 0.7% (84)
Completion percentage: 0.7% (84)

Export
Percents%
CountΣ

Other tools in this category (freeform answers).

On a scale of one (very unhappy) to five (very happy), how happy are developers with the current overall state of this category?

Recommended Resources

Intermediate React, v2

You’ll learn hooks in-depth, CSS-in-JS with emotion, increase performance with code splitting and server-side rendering, and more.
Thanks to our partners for supporting us! Learn more.