2021，CSS杀疯了

原文链接：2021，CSS 杀疯了！

2021 年已接近尾声，CSS 作为前端最流行的技术之一，这一年到底有怎样的发展呢？一起来看看吧

本文所有指标均来自 HTTP Archive 数据集。HTTP Archive 是一个社区运行的项目，自 2010 年以来一直在跟踪网络的构建方式。在幕后使用 WebPageTest 和 Lighthouse，每月测试大约 820 万个网站的元数据，并将其包含在公共 BigQuery 数据库中进行分析。
测试网站：820万个；
数据处理：39.5TB。

用法

1. 样式表大小
   下面是每个样式表文件的大小分布：
   
   CSS文件每年的大小都在不断增长，中等页面的CSS文件大约 70KB，较大页面的CSS文件大约 250KB。与2020年相比，CSS文件大小的中位数增加了 7.9%，同时，移动端CSS所有的百分比都略低于Web端CSS。
   
   在所有测试到的CSS文件中，最大的Web页面CSS文件大小为 64,628 KB，最大的移动页面CSS文件大小为 17,823 KB。
2. 预处理器
   页面的CSS大小并未受到预处理器的显著影响。17%的Web页面 和 16.5%的移动页面 包含预处理器，略高于去年的 15%。具体使用的样式如下：
   
3. 样式表数量
   下面是每个页面使用的外部样式表的数量分布：
   
   今年每个页面的样式表分布相对于去年有所增加，第50-90百分位的都增加了一个，第10-15百分位的都没有变化。
   今年，外部样式表数量最多的记录是 2368 ，比2020年的 1379 ，增加了大约一倍。
4. 样式表规则
   下面是每个页面的样式规则数量分布：
   
   与去年相比，较高百分位的数量几乎没有变化，较低百分位的数量略有上升。在多数百分位的数量分布中，Web页面相对于移动页面的样式规则更多一点。

选择器

1. class
   最常用的class名称如下：
   
2. id
   最常用的id名称如下：
   
3. 属性选择器
   最常用的属性选择器如下：
   
   最常用的属性选择器是type，它可以用于选择表单控件，如复选框、单选按钮、文本输入等。
4. 伪类
   最常用的伪类如下：
   
   和 2020 年一样，用户操作伪类:hover、:focus和:active占据了前三名，它们都出现在至少三分之二的页面中。
5. 伪元素
   最常用的伪元素如下：
   
6. !important
   每个页面使用!important的比例如下：
   
   调查发现，移动页面中最多有17,990 条!important规则，Web页面中最多有17,648 条!important规则。
   
   使用