微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

自定义属性

自定义属性（也称为CSS变量）的应用量大增，2021年和2022年之间的增长也不例外。43%的页面，包含桌面和挪动端，都在应用自定义属性，并且至多有一个var()函数。

正如去年所看到的，WordPress是最常见的自定义属性名称的驱动者，这些很容易被-wp-*前缀所辨认。继这些之后，咱们再次发现了很多色彩名称 –-white、–-blue等等，用来指定该色彩的特定色调。

类型

自定义属性的值包含一个类型。例如，--red: #EF2143 是给 --red 调配一个色彩值，而--multiplier: 2.5是调配一个数字值。从去年开始，这些类型有了一些变动。咱们晓得，设置色彩是自定义属性最常见的用处，而且发现色彩类型的页面数量正在减少。然而，就应用的份额而言，这曾经从40%降落到30%。进入这个10%的是calc()，和作为值类型的images。。

属性

尽管包含这些属性的页面数量减少了，但将自定义属性作为一个值的属性依然与去年的程序大致相同。自定义属性最有可能被用于color，这并不奇怪，因为创立色彩计划是这种性能的一个显著用处。

然而，应用var()函数来设置 font-size 曾经从列表中的第十位升至第五位，而设置justify-content的对齐值也进入了前十位。在2021年，有5%的挪动页面和4%的桌面页面应用自定义属性来设置这个对齐值，当初曾经跃升到20%。从数据上看，这一增长仿佛有一部分是因为WordPress的应用，例如，有5%的页面应用-navigation-layout-justify自定义属性。

函数

咱们看到calc()曾经开始作为自定义属性的一个值类型而引人注目，而且它是迄今为止最常见的以这种形式应用的函数。紧随其后的是 linear-gradient() 和用于设置带有阿尔法通道的RGB色彩值的 rgba() 函数。在这之后是用于过渡和动画的各种函数，显示了自定义属性在这一畛域的应用越来越多。

复杂性

在其余自定义属性的值中蕴含自定义属性是可能的。考虑一下这个例子:

: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 */}

正如例子中的正文所显示的，这些子援用被链在一起的越多，自定义属性的深度就越大。

正如在2021年看到的，绝大多数自定义属性的深度为零，这意味着它们的值中不包含其余自定义属性的值。深度为1的属性数量有小幅减少，深度为2的数量则有小幅缩小。然而，从数据上看，咱们对自定义属性的应用在过来一年中并没有变得更加简单。

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。