2021年 CSS 使用趋势
今天来看看2021年CSS在不同方面的使用趋势~
测试依据：
本文所有指标均来自 HTTP Archive 数据集。HTTP Archive 是一个社区运行的项目，自 2010 年以来一直在跟踪网络的构建方式。在幕后使用 WebPageTest 和 Lighthouse，每月测试大约 820 万个网站的元数据，并将其包含在公共 BigQuery 数据库中进行分析。
测试网站：820万个；
数据处理：39.5TB。
一、用法
1. 样式表大小
下面是每个样式表文件的大小分布：
在所有测试到的CSS文件中，最大的Web页面CSS文件大小为 64,628 KB，最大的移动页面CSS文件大小为17,823 KB。
2. 预处理器
页面的CSS大小并未受到预处理器的显著影响。17%的Web页面和16.5%的移动页面包含预处理器，略高于去年的15%。具体使用的样式如下：
3. 样式表数量
下面是每个页面使用的外部样式表的数量分布：
今年，外部样式表数量最多的记录是2368，比2020年的1379，增加了大约一倍。
4. 样式表规则
下面是每个页面的样式规则数量分布：
二、选择器
1. class
最常用的class名称如下：
2. id
最常用的id名称如下：
3. 属性选择器
最常用的属性选择器如下：
4. 伪类
最常用的伪类如下：
5. 伪元素
最常用的伪元素如下：
6.
每个页面使用的比例如下：
使用规则的样式属性分布如下：
三、值和单位
1. 长度
最受欢迎的长度单位：
下面是每个属性的长度类型分布：
下面是最常用的字体相对长度单位分布：
0长度的使用单位分布如下：
2. 计算
下面是使用calc()函数的最常用的属性：
下面是calc()函数中最常用的长度单位：
calc()函数中单位数量的分布如下：
3. 全局关键字
下面是最常用的全局关键字以及其分布：
4. 颜色
最常用的颜色格式如下：
最常用的颜色关键字值：
四、图片
1. CSS中图片格式
下面是CSS中图像格式比例分布：
2. CSS中图片格式
下面是CSS样式文件在中加载的图像数量分布：
3. CSS中图片大小
下面是通过CSS加载的外部图片的大小分布：
下面是按照图片格式在移动页面上通过CSS加载的外部图像大小分布：
4. 渐变
下面是常见的使用渐变的属性：
五、布局
下面是最长使用的布局类型：
1. Flexbox和Grid布局
下面是在移动设备上采用Flexbox和Grid布局的比例分布：
2. 多列布局
使用多列布局的页面的百分比：20%。
3. border-box数量
每个页面中使用box-sizing: border-box的数量分布：
4. 过渡和动画
动画仍然是被广泛使用的，animation属性在 77% 的移动页面和 73% 的桌面页面上使用。transition属性在 85% 的移动页面和 90% 的桌面页面上使用。
最常使用过渡的属性：
延迟过渡的分布：
过渡计时功能的分布：
最常用的动画类型：
六、响应式设计
1. 媒体查询功能
最常用的用作媒体查询的功能如下：
2. 媒体查询断点
最常用的媒体查询断点值：
3. 媒体查询属性
通过媒体查询最常更改的属性：
七、特征查询
特征查询 ( @supports) 的使用继续保持增长。2019 年，有 30% 的页面在使用，2020年为 39%。2021 年，将近 48% 的页面使用特征查询来决定在什么上下文中应用哪种 CSS。
最常使用的特征查询的依据分布如下：
八、自定义属性
2019-2021 年自定义属性使用的变化如下：
1. 命名
对于自定义属性的命名，最常使用的自定义属性名称如下：
2. 用法
最常用自定义属性的属性如下：
3. 复杂
自定义属性是可以包含其他自定义属性的：
: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 */
}
自定义属性深度的分布如下：
除此之外，使用自定义属性值的选择器， 60% 设置在根元素上（使用:root或html选择器），大约 5% 设置在<body>元素上。其余的应用于根元素的某些后代而不是<body>. 这意味着大约三分之二的自定义属性被用作实际上是全局常量。
九、国际化
对于不同语言，其可能存在不用的书写形式，比如：
英文字符是从左到右书写的； 阿拉伯语、希伯来语和乌尔都语都是从右到左书写， 汉语、蒙古语、日语可以从上到下书写。
对于这些复杂的情况，HTML 和 CSS 都提供了对应的处理方法。
1. 方向
可以使用 CSS 的direction属性来强制执行文本的方向。该属性在 11% 的元素上被使用，在 3% 的页面上的元素上被使用。在使用 CSS 设置方向的页面中，92% 的<html>元素和 82% 的<body>元素被设置为ltr（从左到右），只有 9%页面中将该属性设置为rtl（从右到左）。
2. 逻辑属性
另一个对国际化有用的 CSS 特性就是“逻辑”属性。比如margin-block-start、padding-inline-end等，以及text-align属性的属性值start和end等。这些属性和值都和文本流的方向相关。
下面是逻辑属性的属性类型分布：
十、CSS in JS
下面是使用的CSS-in-JS 库的分布情况：
十一、简写
1. 简写属性
有些样式表中混合了简写属性background和普通属性background-size，在相应的简写属性之后出现的普通属性最常见的如下：
2. background
可以看到，background相关的普通属性是使用最多的，下面是最常用的background属性：
3. padding和margin
下面是最常用的padding和margin属性：
4. font
下面是最常用的字体属性：
5. Flexbox
下面是最常用的 Flexbox 相关属性：
6. Grid
下面是最常用的 Grid 相关属性：
十二、错误类型
下面来看CSS中常见的一些错误。
1. 重复声明
“声明重复”的数量——通过确定有多少声明使用相同的属性和值，以及有多少声明在页面的内部是唯一的，从而粗略估计样式表的效率。
下面是每个页面重复声明的分布：
2. 不存在的属性
最常见的不存在的属性如下：
十三、预处理器Sass
Sass是最流行的CSS预处理器之一，最常用的 Sass 函数调用如下：
下面是 Sass 中最常用的流控制结构：
这就是2021年CSS的使用趋势，期待 CSS 在未来的发展~
关于本文：
原文：https://almanac.httparchive.org/en/2021/css
作者：Eric A. Meyer、Shuvam Manna
译者：CUGGZ