CSS-in-JS

幫助 CSS 整合進 JavaScript 的程式庫。

排名

輸出
滿意度滿
興趣興
使用程度使
知道知

滿意度、有興趣、實際使用、有聽過比例的排名。

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%

少於 10% 聽過的技術不算在內。每個比例的根據：

  • 滿意度： 還會再用 / (還會再用 + 不會再用)
  • 有興趣：想要學 / (想要學 + 沒興趣)
  • 實際使用：(還會再用 + 不會再用) / 全部
  • 有聽過：(全部 - 沒聽過) / 全部

逐年體驗

輸出
百分比%
數量Σ

技術的逐年調查意見概要。

不會再用
沒興趣
還會用
有興趣
沒聽過
2019202020192020

Styled Components

2019202020192020

JSS

2019202020192020

Styled JSX

2019202020192020

Radium

2019202020192020

Emotion

2019202020192020

CSS Modules

只有 1 年資料的技術不算在內。

區分正面/負面

輸出

這張圖表以中間軸線往兩旁分為正面（想要學、還會再用）vs 負面（沒興趣、不會再用）的體驗。

長條的寬度代表答題者知道某技術的數量。

不會再用沒興趣還會用有興趣知道60%40%20%0%20%40%60%80%60%40%20%0%20%40%60%80%CSS ModulesStyled ComponentsStyled SystemEmotionStyled JSXLinariaStitchesJSSAstroturfStyletronFelaRadium

Styled Components
完成百分比： 80.5% (9255)
完成百分比： 80.5% (9255)

輸出
百分比%
數量Σ

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%
不會再用
沒興趣
還會用
有興趣
沒聽過

JSS
完成百分比： 80.6% (9267)
完成百分比： 80.6% (9267)

輸出
百分比%
數量Σ

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%
不會再用
沒興趣
還會用
有興趣
沒聽過

Styled JSX
完成百分比： 80.8% (9282)
完成百分比： 80.8% (9282)

輸出
百分比%
數量Σ

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%
不會再用
沒興趣
還會用
有興趣
沒聽過

Radium
完成百分比： 80.6% (9264)
完成百分比： 80.6% (9264)

輸出
百分比%
數量Σ

2019

11.3% 11.3% 82.2% 82.2%

2020

11.9% 11.9% 81.3% 81.3%
不會再用
沒興趣
還會用
有興趣
沒聽過

Emotion
完成百分比： 80.8% (9281)
完成百分比： 80.8% (9281)

輸出
百分比%
數量Σ

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%
不會再用
沒興趣
還會用
有興趣
沒聽過

CSS Modules
完成百分比： 80.9% (9293)
完成百分比： 80.9% (9293)

輸出
百分比%
數量Σ

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%
不會再用
沒興趣
還會用
有興趣
沒聽過

Styled System
完成百分比： 80.6% (9268)
完成百分比： 80.6% (9268)

輸出
百分比%
數量Σ

2020

8% 8% 78.5% 78.5%
不會再用
沒興趣
還會用
有興趣
沒聽過
我們詢問 CSS 社群成員，分享「年度精選」

我的 2020 精選：Fela

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

我們詢問 CSS 社群成員，分享「年度精選」

Hugo “Kitty” Giraudel

非二元無障礙與多元倡議

Stitches
完成百分比： 80.7% (9270)
完成百分比： 80.7% (9270)

輸出
百分比%
數量Σ

2020

91.9% 91.9%
不會再用
沒興趣
還會用
有興趣
沒聽過

Styletron
完成百分比： 80.8% (9281)
完成百分比： 80.8% (9281)

輸出
百分比%
數量Σ

2020

93.2% 93.2%
不會再用
沒興趣
還會用
有興趣
沒聽過

Fela
完成百分比： 80.8% (9284)
完成百分比： 80.8% (9284)

輸出
百分比%
數量Σ

2020

94.2% 94.2%
不會再用
沒興趣
還會用
有興趣
沒聽過

Linaria
完成百分比： 80.7% (9277)
完成百分比： 80.7% (9277)

輸出
百分比%
數量Σ

2020

92.2% 92.2%
不會再用
沒興趣
還會用
有興趣
沒聽過

Astroturf
完成百分比： 80.7% (9271)
完成百分比： 80.7% (9271)

輸出
百分比%
數量Σ

2020

93.7% 93.7%
不會再用
沒興趣
還會用
有興趣
沒聽過

其他工具
完成百分比： 0.7% (84)
完成百分比： 0.7% (84)

輸出
百分比%
數量Σ

此分類裡的其他工具。（自由填答）

0.05.01015200.05.0101520使用者數量CSS-in-JSCSS-in-JSVue.jsVue.jsTheme UITheme UI121314

整體愉悅感

輸出
百分比%
數量Σ

開發者目前對於此分類的整體現況是否開心？程度從 1（非常不開心）到 5（非常開心）。

0%10%20%30%40%50%使用者百分比Very UnhappyUnhappyNeutralHappyVery Happy愉悅感0%10%20%30%40%50%4.7%4.7%10%10%50.5%50.5%26.7%26.7%8%8%

推薦資源

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.
感謝贊助我們的伙伴！ 深入瞭解。
« 前一項： CSS 方法論後一項： 其他工具 »
Charts built with Nivo. 存放在 Netlify。
有問題？發現臭蟲？請填寫 Issue。 Join us on Discord.
Press option/alt to enable translator mode.