2021 年 CSS 使用趋势
The following article is from 前端充电宝 Author CUGGZ
今天来看看 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. 长度
最受欢迎的长度单位：
下面是每个属性的长度类型分布：
下面是最常用的字体相对长度单位分布：
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 函数调用如下：
这就是 2021 年 CSS 的使用趋势，期待 CSS 在未来的发展~关于本文：
原文：almanac.httparchive.org/en/2021/css
作者：Eric A. Meyer、Shuvam Manna
译者：CUGGZ
- EOF -
觉得本文对你有帮助？请分享给更多人
推荐关注「前端大全」，提升前端技能
点赞和在看就是最大的支持❤️