The State of CSS 2019: Frameworki CSS

Polish

Frameworki CSS

Przez lata debata toczyła się dalej: czy należy używać narzędzi UI, takich jak Bootstrap, czy też jest to „oszustwo”? Czy wszystkie strony internetowe będą wyglądać tak samo? Oraz czy projektanci będą bezużyteczni?

W 2019 roku można śmiało powiedzieć, że debata została rozstrzygnięta, framework zwyciężyły. Bootstrap nadąża za duchem czasu i generuje ogromny ekosystem różnych motywów i wtyczek, podczas gdy Google Material Design pomógł spopularyzować własną specyficzną estetykę.

Podczas gdy podejście zorientowane na klasę użytkową nowych frameworków, takich jak CSS Tailwind, sprawia, że kwestionujesz wszystko, co wiesz o pisaniu „właściwego” semantycznego CSS, jego wskaźnik satysfakcji wynosi aż 81% co oznacza, że nadszedł czas, aby ponownie rozważyć nasze stare z góry przyjęte pojęcia…

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

Bootstrap

82.3%

65.64%

80.56%

88.67%

87.73%

87.21%

84%

Materialize CSS

27.66%

19.38%

31.56%

34.98%

30.8%

25.26%

24%

Foundation

25.57%

5.29%

11.7%

26.28%

36.29%

38.58%

35.29%

Semantic UI

14.79%

12.78%

15.26%

16.26%

15.84%

13.77%

14.82%

Bulma

12.58%

8.81%

14.84%

15.74%

14.74%

10.97%

10.35%

PureCSS

7.61%

3.52%

7.52%

8.11%

8.56%

8.06%

9.88%

Ant Design

6.4%

2.64%

7.63%

9.55%

8.7%

5.65%

4.24%

UIKit

5.53%

2.64%

4.81%

5.72%

6.43%

6.3%

7.29%

Tachyons

5.52%

3.52%

4.6%

5.13%

6.9%

7.34%

5.65%

Tailwind

4.98%

2.2%

3.34%

5.75%

6.48%

7.18%

4.94%

Primer

1.36%

1.32%

0.94%

1.03%

1.94%

1.53%

1.41%

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)

Bootstrap

84.37%

73.73%

85.12%

88.25%

87.09%

87.15%

89.53%

79.7%

Materialize CSS

30.24%

29.27%

34.88%

32.86%

31.28%

27.74%

29.3%

26.32%

Foundation

28.77%

16.32%

19.4%

27.18%

31.94%

36.26%

38.72%

31.58%

Semantic UI

16.9%

14.45%

14.64%

14.72%

14.46%

14.54%

19.2%

26.32%

Bulma

14.36%

15.2%

15.24%

14.67%

15.31%

13.31%

10.97%

15.79%

PureCSS

9.04%

7.32%

9.29%

9.15%

8.03%

7.18%

8.79%

13.53%

Ant Design

8.12%

3.94%

8.21%

9.66%

7.72%

7.09%

8.17%

12.03%

Tachyons

6.62%

6.57%

3.93%

3.63%

5.59%

7.56%

9.29%

9.77%

UIKit

6.42%

5.82%

7.5%

6.85%

5.86%

5.52%

5.86%

7.52%

Tailwind

5.26%

7.05%

6.42%

6.23%

6.02%

Primer

1.72%

1.69%

1.19%

0.97%

1.64%

1.46%

2.06%

3.01%

Różnica od ogólnego wykorzystania:

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

Bootstrap

Procen ukończenia: 99.23% (11230)

Procenty%IlośćΣ

UŻYWAEM tego i UŻYJĘ ponownie44.98%

UŻYWAEM tego i NIE użyję ponownie41.2%

SYSZAEŁEM o tym i CHCIAŁBYM się tego nauczyć2.21%

SYSZAEŁEM o tym i NIE jestem zainteresowany10.75%

Nigdy o tym nie słyszałem0.09%

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Linki

Materialize CSS

Procen ukończenia: 99.26% (11233)

Procenty%IlośćΣ

UŻYWAEM tego i UŻYJĘ ponownie17.05%

UŻYWAEM tego i NIE użyję ponownie12.76%

SYSZAEŁEM o tym i CHCIAŁBYM się tego nauczyć15.45%

SYSZAEŁEM o tym i NIE jestem zainteresowany26.38%

Nigdy o tym nie słyszałem27.62%

Materialize, a CSS Framework based on Material Design

Linki

Ant Design

Procen ukończenia: 99.19% (11225)

Procenty%IlośćΣ

UŻYWAEM tego i UŻYJĘ ponownie4.39%

UŻYWAEM tego i NIE użyję ponownie3.27%

SYSZAEŁEM o tym i CHCIAŁBYM się tego nauczyć9.89%

SYSZAEŁEM o tym i NIE jestem zainteresowany15.67%

Nigdy o tym nie słyszałem65.97%

🌈 A UI Design Language and React UI library

Linki

Semantic UI

Procen ukończenia: 99.05% (11209)

Procenty%IlośćΣ

UŻYWAEM tego i UŻYJĘ ponownie9.23%

UŻYWAEM tego i NIE użyję ponownie5.94%

SYSZAEŁEM o tym i CHCIAŁBYM się tego nauczyć21.35%

SYSZAEŁEM o tym i NIE jestem zainteresowany25.71%

Nigdy o tym nie słyszałem36.82%

Semantic is a UI component framework based around useful principles from natural language.

Linki

Bulma

Procen ukończenia: 99.17% (11223)

Procenty%IlośćΣ

UŻYWAEM tego i UŻYJĘ ponownie10.04%

UŻYWAEM tego i NIE użyję ponownie3.57%

SYSZAEŁEM o tym i CHCIAŁBYM się tego nauczyć14.54%

SYSZAEŁEM o tym i NIE jestem zainteresowany20.96%

Nigdy o tym nie słyszałem50.06%

Modern CSS framework based on Flexbox

Linki

Foundation

Procen ukończenia: 99.1% (11215)

Procenty%IlośćΣ

UŻYWAEM tego i UŻYJĘ ponownie14.1%

UŻYWAEM tego i NIE użyję ponownie17.22%

SYSZAEŁEM o tym i CHCIAŁBYM się tego nauczyć13.2%

SYSZAEŁEM o tym i NIE jestem zainteresowany33.82%

Nigdy o tym nie słyszałem20.76%

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

Linki

UIKit

Procen ukończenia: 98.86% (11188)

Procenty%IlośćΣ

UŻYWAEM tego i UŻYJĘ ponownie3.27%

UŻYWAEM tego i NIE użyję ponownie2.74%

SYSZAEŁEM o tym i CHCIAŁBYM się tego nauczyć11.52%

SYSZAEŁEM o tym i NIE jestem zainteresowany22.21%

Nigdy o tym nie słyszałem59.12%

A lightweight and modular front-end framework for developing fast and powerful web interfaces

Linki

Tachyons

Procen ukończenia: 98.9% (11193)

Procenty%IlośćΣ

UŻYWAEM tego i UŻYJĘ ponownie4.13%

UŻYWAEM tego i NIE użyję ponownie2.1%

SYSZAEŁEM o tym i CHCIAŁBYM się tego nauczyć10.21%

SYSZAEŁEM o tym i NIE jestem zainteresowany16.36%

Nigdy o tym nie słyszałem66.1%

Functional css for humans

Linki

Primer

Procen ukończenia: 98.6% (11159)

Procenty%IlośćΣ

UŻYWAEM tego i UŻYJĘ ponownie0.62%

UŻYWAEM tego i NIE użyję ponownie0.86%

SYSZAEŁEM o tym i CHCIAŁBYM się tego nauczyć4.57%

SYSZAEŁEM o tym i NIE jestem zainteresowany12.03%

Nigdy o tym nie słyszałem80.53%

The CSS design system that powers GitHub

Linki

Tailwind

Procen ukończenia: 98.98% (11202)

Procenty%IlośćΣ

UŻYWAEM tego i UŻYJĘ ponownie4.9%

UŻYWAEM tego i NIE użyję ponownie1.13%

SYSZAEŁEM o tym i CHCIAŁBYM się tego nauczyć13.98%

SYSZAEŁEM o tym i NIE jestem zainteresowany13.96%

Nigdy o tym nie słyszałem65.01%

A utility-first CSS framework for rapid UI development.

Linki

PureCSS

Procen ukończenia: 99.14% (11220)

Procenty%IlośćΣ

UŻYWAEM tego i UŻYJĘ ponownie5.44%

UŻYWAEM tego i NIE użyję ponownie2.67%

SYSZAEŁEM o tym i CHCIAŁBYM się tego nauczyć13.57%

SYSZAEŁEM o tym i NIE jestem zainteresowany17.26%

Nigdy o tym nie słyszałem60.2%

A set of small, responsive CSS modules that you can use in every web project.

Linki

« Poprzedni: Pre & Post Procesory Następny: Metodologie »