CSS 框架

這幾年來持續不斷的激烈辯論:是否使用 Bootstrap 這樣的 UI 工具包?或者認為那在「作弊」?會讓所有網站都看起來一個模樣嗎?設計師會變得沒有用處嗎?

到了 2019 年,爭論可以說到了尾端,而框架派贏了。Bootstrap 跟上時代腳步,以各種主題與外掛程式產生巨大的不份系,而 Google 的 Material Design 讓自己的美學風格更廣泛使用。

像是 Tailwind 這樣專注於 utility-class 方法的新框架,會讓人懷疑之前所知道所有撰寫「正確」的情境化 CSS,81% 的滿意度代表可能是時候重新思考我們早已先入為主的看法⋯

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

有注意到 (所有回應 - 沒聽過)/所有回應
有興趣 有興趣/(有興趣 + 沒興趣)
滿意度 會再次用/(會再次用 + 不願意用)

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

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

資歷年數
全體
<1
1~2
2~5
5~10
10~20
>20
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%
與全體使用情況的差距:
-20%-10%0+10%+20%

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

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

薪資範圍
全體
0
0~10k
10~30k
30~50k
50~100k
100~200k
>200k
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
6%
6%
5%
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%
與全體使用情況的差距:
-20%-10%0+10%+20%

Bootstrap

完成答題百分比 99.23% (11230)
完成答題百分比 99.23% (11230)
百分比%數量Σ
我之前使用過,而且願意再次使用44.98%
我之前使用過,但是不願意再次使用41.2%
我有聽說過,也有想要學習2.21%
我有聽說過,但是沒有興趣10.75%
從來沒有聽過0.09%

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

Materialize CSS

完成答題百分比 99.26% (11233)
完成答題百分比 99.26% (11233)
百分比%數量Σ
我之前使用過,而且願意再次使用17.05%
我之前使用過,但是不願意再次使用12.76%
我有聽說過,也有想要學習15.45%
我有聽說過,但是沒有興趣26.38%
從來沒有聽過27.62%

Materialize, a CSS Framework based on Material Design

Ant Design

完成答題百分比 99.19% (11225)
完成答題百分比 99.19% (11225)
百分比%數量Σ
我之前使用過,而且願意再次使用4.39%
我之前使用過,但是不願意再次使用3.27%
我有聽說過,也有想要學習9.89%
我有聽說過,但是沒有興趣15.67%
從來沒有聽過65.97%

🌈 A UI Design Language and React UI library

Semantic UI

完成答題百分比 99.05% (11209)
完成答題百分比 99.05% (11209)
百分比%數量Σ
我之前使用過,而且願意再次使用9.23%
我之前使用過,但是不願意再次使用5.94%
我有聽說過,也有想要學習21.35%
我有聽說過,但是沒有興趣25.71%
從來沒有聽過36.82%

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

Bulma

完成答題百分比 99.17% (11223)
完成答題百分比 99.17% (11223)
百分比%數量Σ
我之前使用過,而且願意再次使用10.04%
我之前使用過,但是不願意再次使用3.57%
我有聽說過,也有想要學習14.54%
我有聽說過,但是沒有興趣20.96%
從來沒有聽過50.06%

Modern CSS framework based on Flexbox

Foundation

完成答題百分比 99.1% (11215)
完成答題百分比 99.1% (11215)
百分比%數量Σ
我之前使用過,而且願意再次使用14.1%
我之前使用過,但是不願意再次使用17.22%
我有聽說過,也有想要學習13.2%
我有聽說過,但是沒有興趣33.82%
從來沒有聽過20.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.

UIKit

完成答題百分比 98.86% (11188)
完成答題百分比 98.86% (11188)
百分比%數量Σ
我之前使用過,而且願意再次使用3.27%
我之前使用過,但是不願意再次使用2.74%
我有聽說過,也有想要學習11.52%
我有聽說過,但是沒有興趣22.21%
從來沒有聽過59.12%

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

Tachyons

完成答題百分比 98.9% (11193)
完成答題百分比 98.9% (11193)
百分比%數量Σ
我之前使用過,而且願意再次使用4.13%
我之前使用過,但是不願意再次使用2.1%
我有聽說過,也有想要學習10.21%
我有聽說過,但是沒有興趣16.36%
從來沒有聽過66.1%

Functional css for humans

Primer

完成答題百分比 98.6% (11159)
完成答題百分比 98.6% (11159)
百分比%數量Σ
我之前使用過,而且願意再次使用0.62%
我之前使用過,但是不願意再次使用0.86%
我有聽說過,也有想要學習4.57%
我有聽說過,但是沒有興趣12.03%
從來沒有聽過80.53%

The CSS design system that powers GitHub

Tailwind

完成答題百分比 98.98% (11202)
完成答題百分比 98.98% (11202)
百分比%數量Σ
我之前使用過,而且願意再次使用4.9%
我之前使用過,但是不願意再次使用1.13%
我有聽說過,也有想要學習13.98%
我有聽說過,但是沒有興趣13.96%
從來沒有聽過65.01%

A utility-first CSS framework for rapid UI development.

PureCSS

完成答題百分比 99.14% (11220)
完成答題百分比 99.14% (11220)
百分比%數量Σ
我之前使用過,而且願意再次使用5.44%
我之前使用過,但是不願意再次使用2.67%
我有聽說過,也有想要學習13.57%
我有聽說過,但是沒有興趣17.26%
從來沒有聽過60.2%

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