Перейти до вмісту

State of CSS 2024

Бібліотеки та інструменти

Незважаючи на численні можливості, відкриті новими функціями CSS, розробники досі покладаються на певний інструментарій та бібліотеки для підтримання свого робочого процесу — принаймні поки що.

Фреймворки CSS

When it comes to CSS frameworks & UI libraries, Tailwind CSS continues to forge its own path far ahead of other, more traditional competitors.

0%
20%
40%
60%
80%
100%
1

3,657
2

2,623
3

646
4

614
5

446
6

362
7

286
8

272
9

260
10

0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
4,890
50%
Які фреймворки CSS ви використовуєте?

CSS-in-JS

While some of CSS-in-JS's appeal might've been made obsolete by newer CSS features such as variables, recent innovations like typed styles and build-time compilation show that the space still has a lot to offer.

0%
20%
40%
60%
80%
100%
1

2,113
2

2,043
3

876
4

675
5

235
6

210
7

146
8

143
9

98
10

52
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
3,458
36%
Які бібліотеки CSS-in-JS ви використовуєте?
Ми покликали спільноту CSS поділитися своїм "вибором року"

Мій вибір 2024: Широка доступність директиви @property

I would probably say the support of @property coming to Firefox this year, making this feature available-cross browser (since July) and unlocking a lot of cool stuff.
Ми покликали спільноту CSS поділитися своїм "вибором року"

Temani Afif

Автор css-challenges.com

Пре-/постпроцесори

Sass/SCSS is still the leader here, but it'll be interesting to see if its usage will remain stable now that many of its key features have been absorbed by CSS itself.

0%
20%
40%
60%
80%
100%
1

4,652
2

2,622
3

722
4

168
5

6

🚫 Нічого

1,320
7

Інші відповіді

32
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
6,897
71%
Які пре-/постпроцесори ви регулярно використовуєте?

Інструменти

There is no shortage of ways to format, minify, and otherwise tweak your CSS code to your liking.

0%
20%
40%
60%
80%
100%
1

5,175
2

2,691
3

2,199
4

854
5

729
6

604
7

416
8

9

27
10

25
11

🚫 Нічого

742
12

Інші відповіді

67
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
6,656
69%
Які допоміжні програми чи інструменти ви часто використовуєте?
Ми покликали спільноту CSS поділитися своїм "вибором року"

Мій вибір 2024: Temani Afif

Temani is pushing the limits of what can be done with CSS. His experiments always blow my mind!
Ми покликали спільноту CSS поділитися своїм "вибором року"

Josh W. Comeau

Інді-хакер та освітній діяч

Браузери

While the big four browsers dominate this chart, Arc is slowly creeping up the browser rankings, going from 7.8% to 12% usage year over year.

0%
20%
40%
60%
80%
100%
1

Chrome

5,473
2

Firefox

3,689
3

Safari

1,708
4

Edge

1,204
5

Safari iOS

1,107
6

Arc

831
7

Brave

779
8

Chrome Android

758
9

Chrome iOS

368
10

Firefox Android

321
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
7,223
74%
У якому браузері ви переважно працюєте під час початку розробки?

Рекомендовані джерела

Ultimate CSS Grid & Layout Techniques, v3
Jen Kramer

Ultimate CSS Grid & Layout Techniques, v3

You’ll learn to achieve complex layouts with minimal code. You'll also explore advanced techniques like container queries for adaptive components and subgrids for nested layouts.
Practical CSS Layouts
Jen Kramer
Freelance Instructor

Practical CSS Layouts

Starting with the basics of CSS and HTML, you'll progress through creating responsive designs for mobile, tablet, and desktop layouts.
Дякуємо нашим партнерам за підтримку! Детальніше.