2021年 CSS 使用趨勢(shì)

大家好，我是Levi，提前祝大家新年快樂(lè)。今天和大家分享的是 2021 年 CSS 在不同方面的使用趨勢(shì)~

測(cè)試依據(jù)：

本文所有指標(biāo)均來(lái)自 HTTP Archive 數(shù)據(jù)集。HTTP Archive 是一個(gè)社區(qū)運(yùn)行的項(xiàng)目，自 2010 年以來(lái)一直在跟蹤網(wǎng)絡(luò)的構(gòu)建方式。在幕后使用 WebPageTest 和 Lighthouse，每月測(cè)試大約 820 萬(wàn)個(gè)網(wǎng)站的元數(shù)據(jù)，并將其包含在公共 BigQuery 數(shù)據(jù)庫(kù)中進(jìn)行分析。

測(cè)試網(wǎng)站：820萬(wàn)個(gè)；

數(shù)據(jù)處理：39.5TB。

一、用法

1. 樣式表大小

下面是每個(gè)樣式表文件的大小分布： CSS文件每年的大小都在不斷增長(zhǎng)，中等頁(yè)面的CSS文件大約70KB，較大頁(yè)面的CSS文件大約250KB。與2020年相比，CSS文件大小的中位數(shù)增加了7.9%，同時(shí)，移動(dòng)端CSS所有的百分比都略低于Web端CSS。

在所有測(cè)試到的CSS文件中，最大的Web頁(yè)面CSS文件大小為 64,628 KB，最大的移動(dòng)頁(yè)面CSS文件大小為17,823 KB。

2. 預(yù)處理器

頁(yè)面的CSS大小并未受到預(yù)處理器的顯著影響。17%的Web頁(yè)面和16.5%的移動(dòng)頁(yè)面包含預(yù)處理器，略高于去年的15%。具體使用的樣式如下：

3. 樣式表數(shù)量

下面是每個(gè)頁(yè)面使用的外部樣式表的數(shù)量分布： 今年每個(gè)頁(yè)面的樣式表分布相對(duì)于去年有所增加，第50-90百分位的都增加了一個(gè)，第10-15百分位的都沒(méi)有變化。

今年，外部樣式表數(shù)量最多的記錄是2368，比2020年的1379，增加了大約一倍。

4. 樣式表規(guī)則

下面是每個(gè)頁(yè)面的樣式規(guī)則數(shù)量分布： 與去年相比，較高百分位的數(shù)量幾乎沒(méi)有變化，較低百分位的數(shù)量略有上升。在多數(shù)百分位的數(shù)量分布中，Web頁(yè)面相對(duì)于移動(dòng)頁(yè)面的樣式規(guī)則更多一點(diǎn)。

二、選擇器

1. class

最常用的class名稱(chēng)如下：

2. id

最常用的id名稱(chēng)如下：

3. 屬性選擇器

最常用的屬性選擇器如下： 最常用的屬性選擇器是type，它可以用于選擇表單控件，如復(fù)選框、單選按鈕、文本輸入等。

4. 偽類(lèi)

最常用的偽類(lèi)如下： 和 2020 年一樣，用戶(hù)操作偽類(lèi):hover、:focus和:active占據(jù)了前三名，它們都出現(xiàn)在至少三分之二的頁(yè)面中。

5. 偽元素

最常用的偽元素如下：

6. !important

每個(gè)頁(yè)面使用!important的比例如下： 調(diào)查發(fā)現(xiàn)，移動(dòng)頁(yè)面中最多有17,990 條!important規(guī)則，Web頁(yè)面中最多有17,648 條!important規(guī)則。

使用!important規(guī)則的樣式屬性分布如下：

三、值和單位

1. 長(zhǎng)度

最受歡迎的長(zhǎng)度單位： 像素單位仍然是迄今為止最常用的長(zhǎng)度單位，出現(xiàn)在了大約71%的頁(yè)面中。

下面是每個(gè)屬性的長(zhǎng)度類(lèi)型分布：

下面是最常用的字體相對(duì)長(zhǎng)度單位分布：

0長(zhǎng)度的使用單位分布如下： 接近88%的值都直接省略了單位，剩下的有單位的幾乎都是px。

2. 計(jì)算

下面是使用calc()函數(shù)的最常用的屬性： 去過(guò)去幾年一樣，最常用的用法calc()是用來(lái)設(shè)置width的。

下面是calc()函數(shù)中最常用的長(zhǎng)度單位：

calc()函數(shù)中單位數(shù)量的分布如下： calc()值是相對(duì)簡(jiǎn)單的，絕大多數(shù)使用兩種不同單位進(jìn)行計(jì)算，例如從百分比值的計(jì)算結(jié)果中減去像素?？偣?99% 的calc()表達(dá)式使用了一種或兩種單位類(lèi)型。

3. 全局關(guān)鍵字

下面是最常用的全局關(guān)鍵字以及其分布：

4. 顏色

最常用的顏色格式如下： 很長(zhǎng)一段時(shí)間內(nèi)，#RRGGBB格式一直是使用最多的顏色格式，超過(guò)了一半的顏色聲明會(huì)使用這種格式。顏色值的 75% 都是使用十六進(jìn)制和 RGB 語(yǔ)法表示的。

最常用的顏色關(guān)鍵字值：

四、圖片

1. CSS中圖片格式

下面是CSS中圖像格式比例分布：

2. CSS中圖片格式

下面是CSS樣式文件在中加載的圖像數(shù)量分布： 大多數(shù)的CSS不會(huì)加載大量的圖片。在調(diào)查中，站點(diǎn)圖片最多的CSS，其Web頁(yè)面CSS中加載了6088張圖片，移動(dòng)頁(yè)面CSS中加載了6089張圖片。

3. CSS中圖片大小

下面是通過(guò)CSS加載的外部圖片的大小分布： 總體來(lái)說(shuō)，移動(dòng)頁(yè)面會(huì)比Web頁(yè)面CSS加載的外部圖片略小。在調(diào)查中，有一個(gè)頁(yè)面CSS加載的圖片總大小達(dá)到314,386.1 KB。

下面是按照?qǐng)D片格式在移動(dòng)頁(yè)面上通過(guò)CSS加載的外部圖像大小分布： 有趣的是，在第 90 個(gè)百分位數(shù)時(shí)，GIF 圖像平均比 SVG 文件還要小。

4. 漸變

下面是常見(jiàn)的使用漸變的屬性： 下面是最常用的漸變值：

五、布局

下面是最長(zhǎng)使用的布局類(lèi)型： 需要注意，這里并不是頁(yè)面主要布局的方式，而是說(shuō)position: absolute出現(xiàn)在我們分析的頁(yè)面的 93% 的樣式中。同樣，display: grid 出現(xiàn)在 36% 的頁(yè)面樣式中，但這并不意味著所有頁(yè)面的 37% 是 Grid 布局，只是該組合出現(xiàn)在樣式表的某些地方。

1. Flexbox和Grid布局

下面是在移動(dòng)設(shè)備上采用Flexbox和Grid布局的比例分布： 使用Flexbox和Grid布局一直在持續(xù)增長(zhǎng)。2019 年，F(xiàn)lexbox 布局的采用率為 41%；2020 年為 63%。今年，F(xiàn)lexbox 在移動(dòng)端和桌面端分別達(dá)到 71% 和 73%。同時(shí)，Grid 布局的采用率每年都在會(huì)翻倍，從 2% 到 4%，現(xiàn)在是 8%。

2. 多列布局

使用多列布局的頁(yè)面的百分比：20%。

3. border-box數(shù)量

每個(gè)頁(yè)面中使用box-sizing: border-box的數(shù)量分布：

4. 過(guò)渡和動(dòng)畫(huà)

動(dòng)畫(huà)仍然是被廣泛使用的，animation屬性在 77% 的移動(dòng)頁(yè)面和 73% 的桌面頁(yè)面上使用。transition屬性在 85% 的移動(dòng)頁(yè)面和 90% 的桌面頁(yè)面上使用。

最常使用過(guò)渡的屬性： 過(guò)渡持續(xù)時(shí)間的分布： 即使在第 90 個(gè)百分位，過(guò)渡持續(xù)時(shí)間的中位數(shù)也僅為半秒。

延遲過(guò)渡的分布： 可以看到，最高的過(guò)渡延遲中位數(shù)是 1.7 秒，第 10 個(gè)百分位數(shù)的中位數(shù)延遲大約不到負(fù)三分之一秒，這表明大量過(guò)渡是在生成的動(dòng)畫(huà)中途開(kāi)始的。

過(guò)渡計(jì)時(shí)功能的分布：

最常用的動(dòng)畫(huà)類(lèi)型：

六、響應(yīng)式設(shè)計(jì)

1. 媒體查詢(xún)功能

最常用的用作媒體查詢(xún)的功能如下： max-width和min-width是迄今為止最受歡迎的查詢(xún)功能。

2. 媒體查詢(xún)斷點(diǎn)

最常用的媒體查詢(xún)斷點(diǎn)值： 迄今為止最常見(jiàn)的斷點(diǎn)是 767 和 768 px，這與 iPad 在縱向模式下的分辨率非常吻合。767px 被大量用作最大寬度斷點(diǎn)，而很少用作最小寬度值。786px經(jīng)常被用作最小和最大斷點(diǎn)。

3. 媒體查詢(xún)屬性

通過(guò)媒體查詢(xún)最常更改的屬性： 最常設(shè)置的屬性是display，緊隨其后的是color, width, 和height。

七、特征查詢(xún)

特征查詢(xún) ( @supports) 的使用繼續(xù)保持增長(zhǎng)。2019 年，有 30% 的頁(yè)面在使用，2020年為 39%。2021 年，將近 48% 的頁(yè)面使用特征查詢(xún)來(lái)決定在什么上下文中應(yīng)用哪種 CSS。

最常使用的特征查詢(xún)的依據(jù)分布如下： 粘性定位是最受歡迎的查詢(xún)依據(jù)，占所有特征查詢(xún)的一半以上。

八、自定義屬性

2019-2021 年自定義屬性使用的變化如下： 今年，28.6% 的移動(dòng)頁(yè)面和 28.3% 的桌面頁(yè)面定義了自定義屬性（也就是CSS變量）。并且，35.2% 的移動(dòng)頁(yè)面和 35.6% 的桌面頁(yè)面包含至少一個(gè)var()值。

1. 命名

對(duì)于自定義屬性的命名，最常使用的自定義屬性名稱(chēng)如下： 使用最多的自定義屬性是--wp開(kāi)頭的，這些都是WordPress網(wǎng)站中的屬性。

2. 用法

最常用自定義屬性的屬性如下： 自定義屬性值類(lèi)型的分布如下：

3. 復(fù)雜

自定義屬性是可以包含其他自定義屬性的：

:root?{
??--base-hue:?335;?/*?depth?=?0?*/
??--base-color:?hsl(var(--base-hue)?90%?50%);?/*?depth?=?1?*/
??--background:?linear-gradient(var(--base-color),?black);?/*?depth?=?2?*/
}

自定義屬性深度的分布如下： 絕大多數(shù)自定義屬性的值深度為零：它們沒(méi)有在自己的值中包含其他自定義屬性的值。近三分之一有一個(gè)深度級(jí)別，除此之外，幾乎沒(méi)有深度為兩個(gè)或更多的自定義屬性值。

除此之外，使用自定義屬性值的選擇器， 60% 設(shè)置在根元素上（使用:root或html選擇器），大約 5% 設(shè)置在元素上。其余的應(yīng)用于根元素的某些后代而不是. 這意味著大約三分之二的自定義屬性被用作實(shí)際上是全局常量。

九、國(guó)際化

對(duì)于不同語(yǔ)言，其可能存在不用的書(shū)寫(xiě)形式，比如：

• 英文字符是從左到右書(shū)寫(xiě)的；
• 阿拉伯語(yǔ)、希伯來(lái)語(yǔ)和烏爾都語(yǔ)都是從右到左書(shū)寫(xiě)，
• 漢語(yǔ)、蒙古語(yǔ)、日語(yǔ)可以從上到下書(shū)寫(xiě)。

對(duì)于這些復(fù)雜的情況，HTML 和 CSS 都提供了對(duì)應(yīng)的處理方法。

1. 方向

可以使用 CSS 的direction屬性來(lái)強(qiáng)制執(zhí)行文本的方向。該屬性在 11% 的元素上被使用，在 3% 的頁(yè)面上的元素上被使用。在使用 CSS 設(shè)置方向的頁(yè)面中，92% 的元素和 82% 的元素被設(shè)置為ltr（從左到右），只有 9%頁(yè)面中將該屬性設(shè)置為rtl（從右到左）。

2. 邏輯屬性

另一個(gè)對(duì)國(guó)際化有用的 CSS 特性就是“邏輯”屬性。比如margin-block-start、padding-inline-end等，以及text-align屬性的屬性值start和end等。這些屬性和值都和文本流的方向相關(guān)。

下面是邏輯屬性的屬性類(lèi)型分布： 統(tǒng)計(jì)發(fā)現(xiàn)，只有 4% 的頁(yè)面使用了邏輯屬性。在這些頁(yè)面中，大約 33% 的頁(yè)面使用它來(lái)設(shè)置text-align為start或end。另外 46% 設(shè)置了邏輯邊距和填充。

十、CSS in JS

下面是使用的CSS-in-JS 庫(kù)的分布情況： 統(tǒng)計(jì)發(fā)現(xiàn)，大約 3% 的頁(yè)面使用了 CSS-in-JS。其中Styled Component就占了一半多。

十一、簡(jiǎn)寫(xiě)

1. 簡(jiǎn)寫(xiě)屬性

有些樣式表中混合了簡(jiǎn)寫(xiě)屬性background和普通屬性background-size，在相應(yīng)的簡(jiǎn)寫(xiě)屬性之后出現(xiàn)的普通屬性最常見(jiàn)的如下：

2. background

可以看到，background相關(guān)的普通屬性是使用最多的，下面是最常用的background屬性：

3. padding和margin

下面是最常用的padding和margin屬性：

4. font

下面是最常用的字體屬性：

5. Flexbox

下面是最常用的 Flexbox 相關(guān)屬性：

6. Grid

下面是最常用的 Grid 相關(guān)屬性：

十二、錯(cuò)誤類(lèi)型

下面來(lái)看CSS中常見(jiàn)的一些錯(cuò)誤。

1. 重復(fù)聲明

“聲明重復(fù)”的數(shù)量——通過(guò)確定有多少聲明使用相同的屬性和值，以及有多少聲明在頁(yè)面的內(nèi)部是唯一的，從而粗略估計(jì)樣式表的效率。

下面是每個(gè)頁(yè)面重復(fù)聲明的分布：

2. 不存在的屬性

最常見(jiàn)的不存在的屬性如下：

十三、預(yù)處理器Sass

Sass是最流行的CSS預(yù)處理器之一，最常用的 Sass 函數(shù)調(diào)用如下： 可以發(fā)現(xiàn)， Sass 函數(shù)中有 28% 是修改顏色的函數(shù)（例如darken、mix），另外 6% 用于讀取顏色（例如alpha、blue）。

下面是 Sass 中最常用的流控制結(jié)構(gòu)： 下面是 Sass 中最常用的規(guī)則嵌套： Sass 的一個(gè)主要優(yōu)點(diǎn)就是能夠?qū)⒁?guī)則嵌套在其他規(guī)則中，從而避免編寫(xiě)重復(fù)的選擇器模式。統(tǒng)計(jì)發(fā)現(xiàn)，87% 的 Sass 樣式表使用了規(guī)則嵌套。

這就是2021年CSS的使用趨勢(shì)，期待 CSS 在未來(lái)的發(fā)展~

關(guān)于本文：

原文：https://almanac.httparchive.org/en/2021/css

作者：Eric A. Meyer、Shuvam Manna

譯者：CUGGZ