2021年 CSS 使用趨勢
大家好，我是Levi，提前祝大家新年快樂。今天和大家分享的是 2021 年 CSS 在不同方面的使用趨勢~
測試依據(jù)：
本文所有指標(biāo)均來自 HTTP Archive 數(shù)據(jù)集。HTTP Archive 是一個(gè)社區(qū)運(yùn)行的項(xiàng)目，自 2010 年以來一直在跟蹤網(wǎng)絡(luò)的構(gòu)建方式。在幕后使用 WebPageTest 和 Lighthouse，每月測試大約 820 萬個(gè)網(wǎng)站的元數(shù)據(jù)，并將其包含在公共 BigQuery 數(shù)據(jù)庫中進(jìn)行分析。
測試網(wǎng)站：820萬個(gè)；
數(shù)據(jù)處理：39.5TB。
一、用法
1. 樣式表大小
下面是每個(gè)樣式表文件的大小分布：
CSS文件每年的大小都在不斷增長，中等頁面的CSS文件大約70KB，較大頁面的CSS文件大約250KB。與2020年相比，CSS文件大小的中位數(shù)增加了7.9%，同時(shí)，移動(dòng)端CSS所有的百分比都略低于Web端CSS。
在所有測試到的CSS文件中，最大的Web頁面CSS文件大小為 64,628 KB，最大的移動(dòng)頁面CSS文件大小為17,823 KB。
2. 預(yù)處理器
頁面的CSS大小并未受到預(yù)處理器的顯著影響。17%的Web頁面和16.5%的移動(dòng)頁面包含預(yù)處理器，略高于去年的15%。具體使用的樣式如下：
3. 樣式表數(shù)量
下面是每個(gè)頁面使用的外部樣式表的數(shù)量分布：
今年每個(gè)頁面的樣式表分布相對于去年有所增加，第50-90百分位的都增加了一個(gè)，第10-15百分位的都沒有變化。
今年，外部樣式表數(shù)量最多的記錄是2368，比2020年的1379，增加了大約一倍。
4. 樣式表規(guī)則
下面是每個(gè)頁面的樣式規(guī)則數(shù)量分布：
與去年相比，較高百分位的數(shù)量幾乎沒有變化，較低百分位的數(shù)量略有上升。在多數(shù)百分位的數(shù)量分布中，Web頁面相對于移動(dòng)頁面的樣式規(guī)則更多一點(diǎn)。
二、選擇器
1. class
最常用的class名稱如下：
2. id
最常用的id名稱如下：
3. 屬性選擇器
最常用的屬性選擇器如下：
最常用的屬性選擇器是type，它可以用于選擇表單控件，如復(fù)選框、單選按鈕、文本輸入等。
4. 偽類
最常用的偽類如下：
和 2020 年一樣，用戶操作偽類:hover、:focus和:active占據(jù)了前三名，它們都出現(xiàn)在至少三分之二的頁面中。
5. 偽元素
最常用的偽元素如下：
6. !important
每個(gè)頁面使用!important的比例如下：
調(diào)查發(fā)現(xiàn)，移動(dòng)頁面中最多有17,990 條!important規(guī)則，Web頁面中最多有17,648 條!important規(guī)則。
使用!important規(guī)則的樣式屬性分布如下：
三、值和單位
1. 長度
最受歡迎的長度單位：
像素單位仍然是迄今為止最常用的長度單位，出現(xiàn)在了大約71%的頁面中。
下面是每個(gè)屬性的長度類型分布：
下面是最常用的字體相對長度單位分布：
0長度的使用單位分布如下：
接近88%的值都直接省略了單位，剩下的有單位的幾乎都是px。
2. 計(jì)算
下面是使用calc()函數(shù)的最常用的屬性：
去過去幾年一樣，最常用的用法calc()是用來設(shè)置width的。
下面是calc()函數(shù)中最常用的長度單位：
calc()函數(shù)中單位數(shù)量的分布如下：
calc()值是相對簡單的，絕大多數(shù)使用兩種不同單位進(jìn)行計(jì)算，例如從百分比值的計(jì)算結(jié)果中減去像素?？偣?99% 的calc()表達(dá)式使用了一種或兩種單位類型。
3. 全局關(guān)鍵字
下面是最常用的全局關(guān)鍵字以及其分布：
4. 顏色
最常用的顏色格式如下：
很長一段時(shí)間內(nèi)，#RRGGBB格式一直是使用最多的顏色格式，超過了一半的顏色聲明會使用這種格式。顏色值的 75% 都是使用十六進(jìn)制和 RGB 語法表示的。
最常用的顏色關(guān)鍵字值：
四、圖片
1. CSS中圖片格式
下面是CSS中圖像格式比例分布：
2. CSS中圖片格式
下面是CSS樣式文件在中加載的圖像數(shù)量分布：
大多數(shù)的CSS不會加載大量的圖片。在調(diào)查中，站點(diǎn)圖片最多的CSS，其Web頁面CSS中加載了6088張圖片，移動(dòng)頁面CSS中加載了6089張圖片。
3. CSS中圖片大小
下面是通過CSS加載的外部圖片的大小分布：
總體來說，移動(dòng)頁面會比Web頁面CSS加載的外部圖片略小。在調(diào)查中，有一個(gè)頁面CSS加載的圖片總大小達(dá)到314,386.1 KB。
下面是按照圖片格式在移動(dòng)頁面上通過CSS加載的外部圖像大小分布：
有趣的是，在第 90 個(gè)百分位數(shù)時(shí)，GIF 圖像平均比 SVG 文件還要小。
4. 漸變
下面是常見的使用漸變的屬性：
下面是最常用的漸變值：
五、布局
下面是最長使用的布局類型：
需要注意，這里并不是頁面主要布局的方式，而是說position: absolute出現(xiàn)在我們分析的頁面的 93% 的樣式中。同樣，display: grid 出現(xiàn)在 36% 的頁面樣式中，但這并不意味著所有頁面的 37% 是 Grid 布局，只是該組合出現(xiàn)在樣式表的某些地方。
1. Flexbox和Grid布局
下面是在移動(dòng)設(shè)備上采用Flexbox和Grid布局的比例分布：
使用Flexbox和Grid布局一直在持續(xù)增長。2019 年，F(xiàn)lexbox 布局的采用率為 41%；2020 年為 63%。今年，F(xiàn)lexbox 在移動(dòng)端和桌面端分別達(dá)到 71% 和 73%。同時(shí)，Grid 布局的采用率每年都在會翻倍，從 2% 到 4%，現(xiàn)在是 8%。
2. 多列布局
使用多列布局的頁面的百分比：20%。
3. border-box數(shù)量
每個(gè)頁面中使用box-sizing: border-box的數(shù)量分布：
4. 過渡和動(dòng)畫
動(dòng)畫仍然是被廣泛使用的，animation屬性在 77% 的移動(dòng)頁面和 73% 的桌面頁面上使用。transition屬性在 85% 的移動(dòng)頁面和 90% 的桌面頁面上使用。
最常使用過渡的屬性：
過渡持續(xù)時(shí)間的分布：
即使在第 90 個(gè)百分位，過渡持續(xù)時(shí)間的中位數(shù)也僅為半秒。
延遲過渡的分布：
可以看到，最高的過渡延遲中位數(shù)是 1.7 秒，第 10 個(gè)百分位數(shù)的中位數(shù)延遲大約不到負(fù)三分之一秒，這表明大量過渡是在生成的動(dòng)畫中途開始的。
過渡計(jì)時(shí)功能的分布：
最常用的動(dòng)畫類型：
六、響應(yīng)式設(shè)計(jì)
1. 媒體查詢功能
最常用的用作媒體查詢的功能如下：
max-width和min-width是迄今為止最受歡迎的查詢功能。
2. 媒體查詢斷點(diǎn)
最常用的媒體查詢斷點(diǎn)值：
迄今為止最常見的斷點(diǎn)是 767 和 768 px，這與 iPad 在縱向模式下的分辨率非常吻合。767px 被大量用作最大寬度斷點(diǎn)，而很少用作最小寬度值。786px經(jīng)常被用作最小和最大斷點(diǎn)。
3. 媒體查詢屬性
通過媒體查詢最常更改的屬性：
最常設(shè)置的屬性是display，緊隨其后的是color, width, 和height。
七、特征查詢
特征查詢 ( @supports) 的使用繼續(xù)保持增長。2019 年，有 30% 的頁面在使用，2020年為 39%。2021 年，將近 48% 的頁面使用特征查詢來決定在什么上下文中應(yīng)用哪種 CSS。
最常使用的特征查詢的依據(jù)分布如下：
粘性定位是最受歡迎的查詢依據(jù)，占所有特征查詢的一半以上。
八、自定義屬性
2019-2021 年自定義屬性使用的變化如下：
今年，28.6% 的移動(dòng)頁面和 28.3% 的桌面頁面定義了自定義屬性（也就是CSS變量）。并且，35.2% 的移動(dòng)頁面和 35.6% 的桌面頁面包含至少一個(gè)var()值。
1. 命名
對于自定義屬性的命名，最常使用的自定義屬性名稱如下：
使用最多的自定義屬性是--wp開頭的，這些都是WordPress網(wǎng)站中的屬性。
2. 用法
最常用自定義屬性的屬性如下：
自定義屬性值類型的分布如下：
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ù)自定義屬性的值深度為零：它們沒有在自己的值中包含其他自定義屬性的值。近三分之一有一個(gè)深度級別，除此之外，幾乎沒有深度為兩個(gè)或更多的自定義屬性值。
除此之外，使用自定義屬性值的選擇器， 60% 設(shè)置在根元素上（使用:root或html選擇器），大約 5% 設(shè)置在元素上。其余的應(yīng)用于根元素的某些后代而不是. 這意味著大約三分之二的自定義屬性被用作實(shí)際上是全局常量。
九、國際化
對于不同語言，其可能存在不用的書寫形式，比如：
- 英文字符是從左到右書寫的；
- 阿拉伯語、希伯來語和烏爾都語都是從右到左書寫，
- 漢語、蒙古語、日語可以從上到下書寫。
對于這些復(fù)雜的情況，HTML 和 CSS 都提供了對應(yīng)的處理方法。
1. 方向
可以使用 CSS 的direction屬性來強(qiáng)制執(zhí)行文本的方向。該屬性在 11% 的元素上被使用，在 3% 的頁面上的元素上被使用。在使用 CSS 設(shè)置方向的頁面中，92% 的元素和 82% 的元素被設(shè)置為ltr（從左到右），只有 9%頁面中將該屬性設(shè)置為rtl（從右到左）。
2. 邏輯屬性
另一個(gè)對國際化有用的 CSS 特性就是“邏輯”屬性。比如margin-block-start、padding-inline-end等，以及text-align屬性的屬性值start和end等。這些屬性和值都和文本流的方向相關(guān)。
下面是邏輯屬性的屬性類型分布：
統(tǒng)計(jì)發(fā)現(xiàn)，只有 4% 的頁面使用了邏輯屬性。在這些頁面中，大約 33% 的頁面使用它來設(shè)置text-align為start或end。另外 46% 設(shè)置了邏輯邊距和填充。
十、CSS in JS
下面是使用的CSS-in-JS 庫的分布情況：
統(tǒng)計(jì)發(fā)現(xiàn)，大約 3% 的頁面使用了 CSS-in-JS。其中Styled Component就占了一半多。
十一、簡寫
1. 簡寫屬性
有些樣式表中混合了簡寫屬性background和普通屬性background-size，在相應(yīng)的簡寫屬性之后出現(xià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ò)誤類型
下面來看CSS中常見的一些錯(cuò)誤。
1. 重復(fù)聲明
“聲明重復(fù)”的數(shù)量——通過確定有多少聲明使用相同的屬性和值，以及有多少聲明在頁面的內(nèi)部是唯一的，從而粗略估計(jì)樣式表的效率。
下面是每個(gè)頁面重復(fù)聲明的分布：
2. 不存在的屬性
最常見的不存在的屬性如下：
十三、預(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ī)則中，從而避免編寫重復(fù)的選擇器模式。統(tǒng)計(jì)發(fā)現(xiàn)，87% 的 Sass 樣式表使用了規(guī)則嵌套。
這就是2021年CSS的使用趨勢，期待 CSS 在未來的發(fā)展~
關(guān)于本文：
原文：https://almanac.httparchive.org/en/2021/css
作者：Eric A. Meyer、Shuvam Manna
譯者：CUGGZ