【带你看看CSS生态圈的技术趋势】state-of-css 2021 详细解读

一、写在前面

• 本文的数据来源是 state-of-css ，是前端生态圈中很有影响力的且规模较大的数据调查。
• 由于 css 这个话题很大，涉及到的技术很多，所以很多可以深挖的技术只能一笔带过，但能出现在 state-of-css 里的，都是有一定闪光点且有一定热度的技术，如果感兴趣的话可以深入了解。
• state-of-js 的调查虽然推迟到一月份了（因为调查人员都去休假了），但还是希望大家多多支持，填填问卷。

二、调查人员统计

今年的 state-of-css 调查共回收了 6112 份调查报告。归功于一个非常棒的团队（我也是其中的一员，负责 中文仓库 的翻译，欢迎大家加入），我们可以将调查结果翻译成多种语言。

2-1、调查人员地域统计

值得注意的是中国回收的问卷只占了全部问卷的 0.9%，虽然这个数字和去年调查占比出奇的一致，但这并不代表说中国的前端开发者占全球的比例只有 0.9%，实际上根据 antd 的下载量和 cnpm 的下载量估算，目测占比在 10% 左右。
也正是因为这一点，在看到这份调查数据时我们可能会有「诶这个框架在报告中很火，可是我身边没人用啊」的感觉。
但这也没太多关系，毕竟只有多角度评价一项技术才能得出一个比较全面的结论。

2-2、调查人员年龄统计

今年 state-of-css 调查还单独统计了开发人员年龄，可以看到绝大部分的前端开发者都是在 24 到 34 岁之间的，也有 21.9% 的前端开发者在 35 到 44 岁之间。虽然参与这份调查的大部分都是外国的开发人员，放到中国的话大概率会年轻化一些，但我仍然觉得看着这样一份数据，还是能够缓解一些我们所谓的“年龄焦虑”吧，毕竟还有几百位的 55+ 的老爷爷们在写 css 呢。

三、CSS 特性

这张图根据技术分类划分，显示了各种特性的采用率。
外圈的尺寸代表了了解这个特性的用户数量, 而内圈的尺寸代表了实际使用这个特性的用户数量。

• 在布局（Layout）方面，像 position 、flexbox（弹性布局） 、grid（网格布局） 已经广泛地被大家采用，但是像 @container（容器查询） 、 subgrid（子网格布局） 这种就比较冷门，没什么人用。
• 在图形和图像（Shapes & Graphics）方面，像 object-fit、clip-path 这种很常用的调整图像形状的特性已经被大家广泛使用了，但是像 color() 这种颜色配置函数就没什么人用了。
• 在交互（Interactions）方面，像 pointer-events 这种特性的应用已经很广泛了，但像overflow-anchor（滚动锚定） 这种就用的相对少。
• 在排版（Typography）和可见性（Accessibility）方面，像 font-display 这种控制字体展示方式的特性还有 ARIA 这种 HTML 无障碍的特性用的比较多，其他都是一些使用度很低的冷门特性。
• 而在其它特性中，像 calc、css变量 这些特性也在被大家广泛使用。

3-1、布局

grid 的占比在以每年 10% 的比例逐渐升高，看得出来，绝大部分开发者都在使用了。

sticky 也被大家广泛使用了，相比去年也有着 8% 的涨幅，做粘滞效果的神器。

flexbox 就更不用说了，普及率已经快到 100% 了。

3-2、图形和图像

object-fit 用的人也越来越多了，每年约增长 10%，做图片自适应非常合适。

clip-path 也有了 7% 的增幅，用于图片区域的裁剪。

3-3、交互、排版与可见性

这三块内容中实在没有很常见且增长很爆炸的特性，硬要说的话，也就只有 tabindex 和 ARIA 了（但他们俩实际上是 HTML 的特性。。。）。

3-4、其它特性

css variables 每年有 10% 的使用率涨幅，随着前端主题定制的需求越来越旺盛，相信这个特性会被大家越来越广泛地使用。

calc 的使用率已经快到 100% 了，也是一个大家都在用的特性，毕竟很多响应式样式就得靠它来计算了。

comparison functions 在今年有 15% 的使用率涨幅，算是今年使用率涨的最快的特性了，它同样也是在做响应式样式时有很亮眼的表现。

四、CSS 技术

• 在预/后处理框架中，Sass 是使用人数最多且满意度最高的，而 Less、Stylus 这种就不那么受开发者青睐。
• 在 CSS 框架中，Bootstrap 用的人很多，但是满意度不太行，Tailwind CSS 正在逐渐成为主流，广受好评，而国产框架 antd 虽然用的人没那么多，但满意度也不错。
• 在 CSS-in-JS 框架中，老牌框架 CSS Modules、Styled components、Emotion 都表现不错，但今年又有一匹黑马 vanilla-extract 值得关注（不过，也许称其为 CSS-in-TS 会更合适一点）。

4-1、预/后处理

满意度：

使用度：

预/后处理框架近几年一直很稳定，没有什么新的变化，也没有新的“黑马”出现，基本就是 PostCSS、SaSS、Less 这些东西，硬要说变化的话，应该也就是 Less 的满意度越来越低，而且越来越多的人在避免使用 Less。

4-2、CSS 框架

满意度：

使用度：

从满意度来看，近几年 Tailwind CSS 一直居于榜首，其原子化 CSS 的特性的确很好用，但是在国内就有点「雷声大雨点小」的意思了，也许是因为国内快糙猛的前端开发风格导致开发者写出来的都是「用完即抛」的 CSS 样式，很难沉淀出一套原子化的样式吧。
而从使用度来看，Bootstrap 的使用度一骑绝尘，甩了第二名整整 46%，可以说是大家都在用了，但是它的满意度很低，而且在逐年降低，有一种「天下苦 Bootstrap 久矣」的感觉。
另外值得一提的是，antd 的满意度排名和实用度排名都在稳步向上走，可以算是国产良心框架了（希望它不要再搞出圣诞节彩蛋这种幺蛾子了）。

4-3、CSS-in-JS 框架

满意度：

使用度：

从满意度来看，CSS-in-JS 技术中杀出了一匹 vanilla-extract 的黑马，应该是和近些年 typescript 的流行有很大关系。它能够构建类型安全的样式，并且是在编译时生成样式文件（这一点就比 emotion 这种运行时注入样式的框架好不少），使用起来就像下面这样，还是挺有意思的：

import {
    
     createTheme, style } from '@vanilla-extract/css';

const [themeClass, vars] = createTheme({
    
    
  color: {
    
    
    brand: 'blue'
  },
  font: {
    
    
    body: 'arial'
  }
});

const exampleStyle = style({
    
    
  backgroundColor: vars.color.brand,
  fontFamily: vars.font.body,
  color: 'white',
  padding
})

document.write(`
  <section class="${
      
      themeClass}">
    <h1 class="${
      
      exampleStyle}">Hello world!</h1>
  </section>
`);

不过因为是最新出的框架，还没有多少人用，可以先观望一下。
老牌框架诸如 CSS Modules、Styled components、Emotion 这些，使用率都有小幅度的上涨，但是满意度却在小幅下跌，不过个人觉得这些久经考验的老牌 CSS-in-JS 框架都还是能用且好用的。

五、浏览器环境与设备

下面这张图显示了开发者们会在哪些浏览器中测试

可以看到对于 Chrome、Firefox、Safari、Edge 这些主流的浏览器，开发者们基本都要对其进行测试，而对于 IE11、IE8 这种浏览器，就很少有人（不到 10%）专门再去关注了。
另外我们国产的 UC 浏览器竟然还上榜了，还有 0.5% 的开发者会专门在 UC 浏览器进行测试。。。

六、开发者对于 CSS 的看法

6-1、CSS 的学习和开发体验

这两张图放到一起看，不难看出开发者们认为 CSS 的难度越来越高，以至于大家写 CSS 的体验稍微变得差了一些。

6-2、主要使用 CSS 做什么

可以看到大部分开发者还是在用 CSS 构建 web 应用、落地页、设计体系、博客网站等「美化页面样式」的工作，而像是用 CSS 做动效和插图、做打印样式排版这种就很少见了。

6-3、CSS 的痛点

开发者们认为 CSS 主要的痛点问题是：

• 浏览器兼容性。
• 工程化，比如样式文件如何组织、无用样式的剔除等。
• 表单元素的样式。
• 响应式布局。
  这些其实都是老生常谈的痛点问题了，我觉得解决这些问题将是未来 CSS 技术演变的主要方向。当然，现在已经出现了很多优秀的技术方案去解决这些问题，比如使用 bootstrap 做响应式布局，使用 purify-css 去剔除 CSS 中的无用样式等。

6-4、CSS还缺少的特性

这里的「缺少」并不是指那些凭空想象出来的特性，而是指现在已经有了提案但是浏览器还没有很好的支持的特性，这些特性主要有：

• 容器查询。
• 父选择器。
• 更好的浏览器支持。
• 原生嵌套样式。
  希望各大浏览器们能早日支持这些特性。

七、今年 CSS 最大的亮点

7-1、使用率进步最大的特性

举个例子，下面这个样式是说，当10vw小于20px，字体最小为20px,当10vw大于40px,字体最大为40px

body {
    
    
  font-size: clamp(20px,10vw,40px);
}

不得不说，css comparison functions 真的很香，做字体、侧边栏的响应式样式的时候，真的相当好用，大部分现代浏览器也支持了这个特性。

7-2、最高满意度的技术

7-3、最受关注的技术

八、总结

编写 CSS 的方式也许会发生变化了。
多年来，和 CSS 样式相关的创新都发生在其他地方，而不是 CSS 本身，比如预处理器、样式库等。虽然值得肯定的是，CSS 本身也有一些受欢迎的改进，比如刚才介绍的那些几乎已经被 100% 使用的 flexbox、calc、css变量 特性，但我们在日常开发中仍然需要寻求刚才说的诸如预处理器之类的 CSS 技术的帮助。

但变化也在发生，CSS 语言正在经历越来越快的变革和更新。

container query（容器查询） 可以让我们更精细化地去做响应式布局，cascade layers（级联层） 将会使我们开发主题化样式或管理复杂样式变得更加容易，虽然它们现在的浏览器支持度都很差，不过我相信这些特性会慢慢普及的。

另外，近期一些诸如 @when/@else 的新提案，能给我们带来更多、更灵活的编写样式的可能性。

还有，我们终于看到 css nesting（CSS 原生嵌套） 有了一些进展。这会为我们提供另外一种完全不同于「借助 sass 或 less 等工具实现 CSS 嵌套」的工作方式。

所有这些都在意味着 2022 年可能是编写 CSS 的方式发生变化的一年，我们可以拭目以待。