The State of CSS 2019: CSS-in-JS

Polish

CSS-in-JS

CSS-in-JS jest jednym z największych wydarzeń ostatnich kilku lat w świecie CSS. Podobnie jak preprocesory ominęły CSS, aby wprowadzić własny zestaw nowych funkcji ponad dziesięć lat temu, biblioteki CSS-in-JS nakładają się na moc JavaScript, aby stworzyć własną ścieżkę, nie czekając na pozostający w tyle CSS.

Jednak podczas gdy niektóre biblioteki, takie jak Styled Components i Emotion, stały się solidnymi opcjami, cały ekosystem jest nadal bardzo rozdrobniony i nieustannie się przemieszcza. Więc dopiero okaże się, jakie miejsce CSS-in-JS zajmie w całym ekosystemie.

Jedno jest pewne: większa konkurencja jest zawsze dobra, a jeśli CSS może ukraść niektóre z najświeższych pomysłów kuzyna JavaScript, to wszyscy na tym skorzystamy!

Rankingi

rankingi świadomości, zainteresowania i zadowolenia. Należy zauważyć, że wszystkie te trzy wskaźniki odpowiadają temu samemu punktowi czasowemu.

Świadomość (Całkowita liczba respondentów - Nie słyszałem)/Całkowita liczba respondentów

Zainteresowanie Zainteresowany/(Zainteresowany + Nie zainteresowany)

Zadowolenie Użyję ponownie/(Użyję ponownie + Nie będę używał)

Wykorzystanie według lat doświadczenia

Kolumna „ogólna” pokazuje ogólne wykorzystanie każdej technologii (respondenci, którzy wybrali użyłbym ponownie” lub „nie użyłbym ponownie”), podczas gdy poniższe kolumny pokazują współczynnik wykorzystania dla każdego przedziału „lat doświadczenia”.

Jaśniejsze różowe tło oznacza wyższy niż ogólny stosunek średni dla danego wspornika.

Lat Doświadczenia

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%

Różnica od ogólnego wykorzystania:

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

Wykorzystanie według przedziału pensji

Kolumna „ogólna” pokazuje całkowite wykorzystanie każdej technologii (respondenci, którzy wybrali „użyłbym ponownie” lub „nie użyłbym ponownie”), podczas gdy poniższe kolumny pokazują współczynnik wykorzystania dla każdego przedziału „rocznego wynagrodzenia”.

Jaśniejsze różowe tło oznacza wyższy niż ogólny stosunek średni dla danego wspornika.

Zakres wynagrodzenia (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%

Różnica od ogólnego wykorzystania:

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

GitHub

Zalecane zasoby

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

You’ll learn hooks in-depth, CSS-in-JS with Emotion, increase performance, add TypeScript and test your App!

Dziękujemy naszym partnerom za wsparcie! Dowiedz się więcej.

« Poprzedni: Metodologie Następny: Inne Narzędzia »