CSS 框架
中文
幫忙改進這次調查的翻譯 →
CSS-in-JS

方法論

CSS 與程式語言（雖然不盡然是…這是另外一場辯論了）不同之處在它產生好幾套方法論，目標都是以正確的方式程式碼化來撰寫。

BEM 已經聚集成眾的同時，Atomic CSS 也開始以全新的 utility-class 導向哲學獲得穩固根基。

我們可能永遠無法找到絕對正確、唯一方式來撰寫 CSS，但是，絕對不會阻礙我們尋找。

排名

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

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

以資歷年數區分使用情況

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

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

資歷年數
全體
<1
1~2
2~5
5~10
10~20
>20
BEM
54.2%
33.04%
50.99%
56.91%
63.6%
64.88%
55.76%
Atomic CSS
20.23%
2.64%
11.49%
20.98%
28.12%
29.93%
28.24%
OOCSS
16.74%
3.08%
7.73%
12.66%
23.16%
28.17%
25.65%
SMACSS
16.1%
2.2%
6.58%
11.64%
21.86%
27.51%
26.82%
ITCSS
6.61%
0%
2.82%
5.03%
10.17%
11.52%
10.12%
與全體使用情況的差距：
-20%-10%0+10%+20%

以薪資範圍區分使用情況

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

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

薪資範圍
全體
0
0~10k
10~30k
30~50k
50~100k
100~200k
>200k
BEM
56.64%
37.9%
52.14%
59.89%
63.04%
63.33%
64.53%
55.64%
Atomic CSS
22.26%
9.94%
13.69%
21.05%
26.49%
27.71%
32.11%
24.81%
OOCSS
18.47%
7.88%
9.76%
15.94%
21.47%
22.31%
28.62%
23.31%
SMACSS
18.29%
7.88%
11.07%
14.87%
18.94%
21.52%
28.18%
25.56%
ITCSS
7.06%
2.63%
4.17%
5.77%
10.03%
10.07%
9.98%
6.77%
與全體使用情況的差距：
-20%-10%0+10%+20%

BEM

完成答題百分比 98.99% (11203)
完成答題百分比 98.99% (11203)
百分比%數量Σ
我之前使用過，而且願意再次使用51.6%
我之前使用過，但是不願意再次使用8.24%
我有聽說過，也有想要學習12.53%
我有聽說過，但是沒有興趣9.11%
從來沒有聽過17.51%

You will not be surprised to hear that BEM is an abbreviation of the key elements of the methodology — Block, Element and Modifier.

連結

Atomic CSS

完成答題百分比 98.69% (11169)
完成答題百分比 98.69% (11169)
百分比%數量Σ
我之前使用過，而且願意再次使用19.87%
我之前使用過，但是不願意再次使用4.76%
我有聽說過，也有想要學習24.16%
我有聽說過，但是沒有興趣17.5%
從來沒有聽過32.39%

Atomic CSS is a CSS architecture. It is not opinionated; it simply defines a set of classes representing single-purpose styling units.

連結

OOCSS

完成答題百分比 98.41% (11137)
完成答題百分比 98.41% (11137)
百分比%數量Σ
我之前使用過，而且願意再次使用15.45%
我之前使用過，但是不願意再次使用4.55%
我有聽說過，也有想要學習18.11%
我有聽說過，但是沒有興趣19.98%
從來沒有聽過40.32%

OOCSS, or object-oriented CSS, is a methodology to help programmers write CSS that is succinct and easy to maintain.

SMACSS

完成答題百分比 98.47% (11144)
完成答題百分比 98.47% (11144)
百分比%數量Σ
我之前使用過，而且願意再次使用14.92%
我之前使用過，但是不願意再次使用4.18%
我有聽說過，也有想要學習16.04%
我有聽說過，但是沒有興趣18.39%
從來沒有聽過44.95%

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. There is no git repository for you to clone. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process.

ITCSS

完成答題百分比 99.03% (11207)
完成答題百分比 99.03% (11207)
百分比%數量Σ
我之前使用過，而且願意再次使用6.99%
我之前使用過，但是不願意再次使用1.29%
我有聽說過，也有想要學習6.31%
我有聽說過，但是沒有興趣9.47%
從來沒有聽過74.97%

ITCSS is a sane, scalable, managed CSS architecture from CSS Wizardry

連結

« 上一篇： CSS 框架下一篇： CSS-in-JS »