跳到内容
HTML 2024 现状调查现已开始！现在就参加调查 →

State of CSS 2024

库与工具

尽管 CSS 的新特性解锁了许多功能，但开发者仍然依赖工具和库来支持他们的工作流程，至少目前是这样。

CSS 框架

您使用哪些 CSS 框架？

在 CSS 框架和 UI 库方面，Tailwind CSS 继续走在其他更传统竞争对手的前面，独树一帜。

0%
15%
30%
45%
60%
75%
1

3,657
2

2,623
3

646
4

614
5

446
6

362
7

286
8

272
9

260
10

0%
15%
30%
45%
60%
75%
受访者百分比
4,890
50%

CSS-in-JS

您使用哪些 CSS-in-JS 库？

虽然 CSS-in-JS 的一些吸引力可能已被诸如变量等较新的 CSS 特性所取代，但最近在类型化样式和构建时编译方面的创新表明，这个领域仍有很多值得期待的地方。

0%
12%
24%
37%
49%
61%
1

2,113
2

2,043
3

876
4

675
5

235
6

210
7

146
8

143
9

98
10

52
0%
12%
24%
37%
49%
61%
受访者百分比
3,458
36%
我们邀请了 CSS 社区的成员分享他们的"年度之选"

我的 2024 年度之选： @property 的广泛可用

我可能会说 @property 今年来到 Firefox，使这个特性在跨浏览器（自 7 月起）可用，并解锁了许多酷炫功能。
我们邀请了 CSS 社区的成员分享他们的"年度之选"

Temani Afif

css-challenges.com 的创建者

预/后处理

您常用哪些预处理器或后处理器？

Sass/SCSS 仍然是这里的领导者，但现在它的许多关键特性已被 CSS 本身所吸收，将会很有趣地观察其使用率是否会保持稳定。

0%
13%
27%
40%
54%
67%
1

4,652
2

2,622
3

722
4

168
5

6

无

1,320
7

其他答案

29
0%
13%
27%
40%
54%
67%
受访者百分比
6,897
71%

工具函数库

常用的工具函数库有？

格式化、压缩和以其他方式调整你的 CSS 代码的方法不胜枚举。

0%
16%
31%
47%
62%
78%
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

其他答案

65
0%
16%
31%
47%
62%
78%
受访者百分比
6,656
69%
我们邀请了 CSS 社区的成员分享他们的"年度之选"

我的 2024 年度之选： Temani Afif

Temani 正在推动 CSS 的极限。他的实验总是让我大开眼界！
我们邀请了 CSS 社区的成员分享他们的"年度之选"

Josh W. Comeau

独立开发者和教育者

浏览器

常用用于开发的浏览器有哪些？

虽然四大主流浏览器主导了这张图表，但 Arc 正在缓慢爬升浏览器排行榜，使用率从去年的 7.8% 上升到了 12%。

0%
15%
30%
45%
61%
76%
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%
15%
30%
45%
61%
76%
受访者百分比
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.
感谢合作伙伴对我们的支持! 了解更多。