CSS-in-JS

Knihovny integrující CSS do javascriptového kódu.

Rankings

Export
SatisfactionS
InterestI
UsageU
AwarenessA

Satisfaction, interest, usage, and awareness ratio rankings.

2019202020192020Styled ComponentsJSSStyled JSXRadiumEmotionCSS ModulesStyled ComponentsJSSStyled JSXRadiumEmotionCSS ModulesStyled SystemStitchesStyletronFelaLinariaAstroturf85%82%59%58%67%68%27%18%87%80%86%87%80%69%41%40%64%57%

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

  • Satisfaction: would use again / (would use again + would not use again)
  • Interest: want to learn / (want to learn + not interested)
  • Usage: (would use again + would not use again) / total
  • Awareness: (total - never heard) / total

Experience Over Time

Export
Percents%
CountΣ

Overview of opinions on the technologies surveyed over time.

Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde
2019202020192020

Styled Components

2019202020192020

JSS

2019202020192020

Styled JSX

2019202020192020

Radium

2019202020192020

Emotion

2019202020192020

CSS Modules

Technologies with only one year of data are not included.

Positive/Negative Split

Export

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.

Stačilo jednouNemám zájemPoužil bych znovuMám zájemAwareness60%40%20%0%20%40%60%80%60%40%20%0%20%40%60%80%CSS ModulesStyled ComponentsStyled SystemEmotionStyled JSXLinariaStitchesJSSAstroturfStyletronFelaRadium

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

Export
Percents%
CountΣ

2019

12.7% 12.7% 33.7% 33.7% 26.7% 26.7% 21% 21%

2020

9.3% 9.3% 13.6% 13.6% 42.3% 42.3% 20.5% 20.5% 14.3% 14.3%
Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde

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

Export
Percents%
CountΣ

2019

15% 15% 9.1% 9.1% 69.1% 69.1%

2020

20.8% 20.8% 8.3% 8.3% 12.2% 12.2% 52.6% 52.6%
Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde

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

Export
Percents%
CountΣ

2019

17% 17% 9.2% 9.2% 13.6% 13.6% 55.7% 55.7%

2020

8.4% 8.4% 21.2% 21.2% 18% 18% 14.6% 14.6% 37.8% 37.8%
Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde

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

Export
Percents%
CountΣ

2019

11.3% 11.3% 82.2% 82.2%

2020

11.9% 11.9% 81.3% 81.3%
Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde

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

Export
Percents%
CountΣ

2019

8.5% 8.5% 11% 11% 72.9% 72.9%

2020

12.7% 12.7% 12.8% 12.8% 13.5% 13.5% 57.6% 57.6%
Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde

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

Export
Percents%
CountΣ

2019

7.8% 7.8% 21.3% 21.3% 30.6% 30.6% 36.7% 36.7%

2020

9.1% 9.1% 31.4% 31.4% 27.4% 27.4% 27.4% 27.4%
Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde

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

Export
Percents%
CountΣ

2020

8% 8% 78.5% 78.5%
Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde
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

91.9% 91.9%
Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde

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

Export
Percents%
CountΣ

2020

93.2% 93.2%
Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde

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

Export
Percents%
CountΣ

2020

94.2% 94.2%
Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde

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

Export
Percents%
CountΣ

2020

92.2% 92.2%
Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde

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

Export
Percents%
CountΣ

2020

93.7% 93.7%
Stačilo jednou
Nemám zájem
Použil bych znovu
Mám zájem
Nevím přesně, o co jde

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

Export
Percents%
CountΣ

Other tools in this category (freeform answers).

0.05.01015200.05.0101520User CountCSS-in-JSCSS-in-JSVue.jsVue.jsTheme UITheme UI121314

Overall Happiness

Export
Percents%
CountΣ

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

0%10%20%30%40%50%Percentage of UsersVery UnhappyUnhappyNeutralHappyVery HappyHappiness0%10%20%30%40%50%4.7%4.7%10%10%50.5%50.5%26.7%26.7%8%8%

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.
« Previous: CSS metodikyNext: Other Tools »
Charts built with Nivo. Hosted by Netlify.
Máte dotaz? Našli jste chybu? Založte issue. Join us on Discord.
Press option/alt to enable translator mode.