The State of CSS 2019: CSS-in-JS

方法論

中文

English

CSS-in-JS

CSS-in-JS 是 CSS 世界過去幾年最具話題的發展之一。就像十多年前，預處理器繞過 CSS，帶來一組自己的新功能，CSS-in-JS 的函示庫以 JavaScript 的力量走出自己的路，不等 CSS 追上來了。

即使有 Styled Components 和 Emotion 函示庫已經是可信任的選擇，整體的生態系仍然非常破碎，經常在變革。因此，以長期來看 CSS-in-JS 在整體生態系會佔到哪個地位還要觀察。

不過，有件事情倒是肯定的：樂見更多競爭。如果 CSS 可以從遠房親戚 JavaScript 偷來一些新鮮的點子，我們都會因此過得更好！

排名

知道、有興趣與滿意度比例的排名。請注意這三個百分比項目各自對應同個時間點。

有注意到 (所有回應 - 沒聽過)/所有回應

有興趣有興趣/(有興趣 + 沒興趣)

滿意度會再次用/(會再次用 + 不願意用)

以資歷年數區分使用情況

「全體」這一欄顯示每一項技術的整體使用情況（也就是答題者選取了「會再使用」或「不會再使用」），而接下來的幾欄是依照「資歷年數」分組的使用比例。

比較亮的粉紅色背景，代表該分組比全體平均比例還要高。

資歷年數

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%

與全體使用情況的差距：

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

以薪資範圍區分使用情況

「全體」這欄顯示每一項技術的整體使用情況（也就是答題者選取了「會再使用」或「不會再使用」），而接下來的幾欄是依照「年收入」分組的使用比例。

比較亮的粉紅色背景，代表該分組比全體平均比例還要高。

薪資範圍

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%

與全體使用情況的差距：

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

Styled Components

完成答題百分比 98.48% (11145)

百分比%數量Σ

我之前使用過，而且願意再次使用33.17%

我之前使用過，但是不願意再次使用5.88%

我有聽說過，也有想要學習26.23%

我有聽說過，但是沒有興趣12.53%

從來沒有聽過20.66%

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

連結

Glamor

完成答題百分比 97.79% (11067)

百分比%數量Σ

我之前使用過，而且願意再次使用2.7%

我之前使用過，但是不願意再次使用2.21%

我有聽說過，也有想要學習9.18%

我有聽說過，但是沒有興趣14.2%

從來沒有聽過69.5%

inline css for react et al

連結

Aphrodite

完成答題百分比 98.49% (11146)

百分比%數量Σ

我之前使用過，而且願意再次使用0.74%

我之前使用過，但是不願意再次使用1.55%

我有聽說過，也有想要學習4.79%

我有聽說過，但是沒有興趣11.55%

從來沒有聽過79.86%

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

連結

JSS

完成答題百分比 98.5% (11147)

百分比%數量Σ

我之前使用過，而且願意再次使用3.92%

我之前使用過，但是不願意再次使用2.71%

我有聽說過，也有想要學習9%

我有聽說過，但是沒有興趣14.74%

從來沒有聽過68.13%

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

連結

Styled JSX

完成答題百分比 98.1% (11102)

百分比%數量Σ

我之前使用過，而且願意再次使用9%

我之前使用過，但是不願意再次使用4.41%

我有聽說過，也有想要學習13.39%

我有聽說過，但是沒有興趣16.67%

從來沒有聽過54.64%

Full CSS support for JSX without compromises

連結

Radium

完成答題百分比 98.04% (11095)

百分比%數量Σ

我之前使用過，而且願意再次使用0.68%

我之前使用過，但是不願意再次使用1.88%

我有聽說過，也有想要學習3.89%

我有聽說過，但是沒有興趣11.03%

從來沒有聽過80.56%

A toolchain for React component styling.

連結

Emotion

完成答題百分比 98.86% (11188)

百分比%數量Σ

我之前使用過，而且願意再次使用6.49%

我之前使用過，但是不願意再次使用1.01%

我有聽說過，也有想要學習10.89%

我有聽說過，但是沒有興趣8.39%

從來沒有聽過72.09%

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

連結

CSS Modules

完成答題百分比 98.88% (11190)

百分比%數量Σ

我之前使用過，而且願意再次使用21.11%

我之前使用過，但是不願意再次使用3.52%

我有聽說過，也有想要學習30.29%

我有聽說過，但是沒有興趣7.71%

從來沒有聽過36.25%

Documentation about css-modules

連結

GitHub

CSS-in-JS

排名

以資歷年數區分使用情況

以薪資範圍區分使用情況

Styled Components

連結

Glamor

連結

Aphrodite

連結

JSS

連結

Styled JSX

連結

Radium

連結

Emotion

連結

CSS Modules

連結

推薦資源

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