往期文章：
【带你看看前端生态圈的技术趋势】state-of-js 2021 & state-of-css 2021 详细解读
【年更】带你看看前端生态圈的技术趋势 state-of-css 2022 & state-of-js 2022 详细解读
一、写在前面
- 本次分享的数据来源是state-of-css是前端生态圈中非常有影响力的且规模很大的数据调查。
- 由于这个分享话题很大，涉及到的技术很多，所以很多可以深挖的技术只能一笔带过，但能出现在本次调查里的，都是有一定闪光点且有一定热度的技术，如果感兴趣的话可以深入了解。
- state-of-js 2023调查仍在进行中，有调查结果了之后我也会第一时间为大家解读。
- 如果这篇文章有其他意见或更好的建议，欢迎大家多多指教。
二、CSS特性
2-1、总览
下图根据技术分类划分，显示了各种特性的采用率。外圈的尺寸代表了了解这个特性的用户数量, 而内圈的尺寸代表了实际使用这个特性的用户数量。
分组区分特性：
热门特性使用率变化：
- 在布局方面，flexbox的gap属性是使用率最高的特性，@container query容器查询进步幅度最大。
- 在图形、图像、颜色方面，css-filters使用率最高，currentcolor进步幅度最大。
- 在交互和选择器这两个方面中，scroll-behavior和:has()选择器的使用率仍在逐年上升，而:has()的进步幅度达到了16%，是今年所有css特性中，进步幅度最大的特性。
- 而对于其它特性，css variables使用率最高，css nesting进步幅度最大。
接下来我会分模块挑选出一批「实用率较高」或「增长速度较快」的特性为大家进行解读。
2-2、详细分析
布局
flexbox的gap属性使用率在今年进步了10%，目前已经超过了90%，普及率非常高了。
developer.mozilla.org/en-US/docs/…
容器查询的使用率仍然较低，只有26%，但进步幅度有14%，非常可观。
developer.mozilla.org/en-US/docs/…
图形、图像与颜色
css滤镜效果在今年使用率也达到了75%，从2019年开始逐年上升。
developer.mozilla.org/en-US/docs/…
backdrop-filter今年使用率突破了50%，进步幅度6%。（图形、图像、颜色这个分类下的特性，基本今年都进步了6%左右）
developer.mozilla.org/zh-CN/docs/…
min-content/max-content/fit-content这类关键字，今年也增加了6%的使用率。
developer.mozilla.org/en-US/docs/…
currentcolor今年使用率也突破了50%，进步幅度7%，是进步幅度最大的特性。
developer.mozilla.org/en-US/docs/…
交互
在所有的交互特性中，scroll-behavior仍然是使用率最高的那一个，而且进步幅度也有7%。
developer.mozilla.org/en-US/docs/…
选择器
在所有CSS特性中，今年最亮眼的就是:has()选择器了，它今年不仅使用率突破了50%，而且进步幅度达到了17%，是所有特性中使用率进步最大的特性。
developer.mozilla.org/en-US/docs/…
其它特性
CSS变量使用率突破了90%，已经被广泛使用了。
developer.mozilla.org/en-US/docs/…
CSS比较函数在原地踏步了两年之后，使用率又提升了4%。
developer.mozilla.org/en-US/docs/…
CSS嵌套仍然没有被所有浏览器厂商支持，所以使用率并不高，只有26%，但进步幅度还是很可观的，有13%的使用率进步。
developer.chrome.com/articles/cs…
三、CSS技术
3-1、CSS 框架
使用率：
满意度：
-
从使用率上来说：
- Bootstrap仍然处于领先位置。
- tailwind css经过这几年的发展，使用率已经超过了50%，「原子化CSS」已经被越来越多的开发者认可了。
- 国产框架Antd这两年一直在15%左右波动，目前处于一个比较稳定的状态。
-
而在满意度方面，也能看到很多有意思的事情：
-
首先是Bootstrap——虽然他使用率一直是第一，但是满意度一直在逐年降低，今年已经快要跌破30%了，看得出来大部分开发者对于它是越来越不满意的。
-
tailwind css随着使用人数的增加，满意度也一直在降，今年它终于从蝉联三年满意度第一的位置跌到了第三，但总的来说还算是很不错的成绩了。
-
而今年的黑马当属Open Props，「原子化CSS」的思想在CSS变量中得以应用，通过下面的方式你就能使用Open Props定制好的CSS样式了。
-
@import "https://unpkg.com/open-props"; .card { border-radius: var(--radius-2); padding: var(--size-fluid-3); box-shadow: var(--shadow-2); &:hover { box-shadow: var(--shadow-3); } @media (--motionOK) { animation: var(--animation-fade-in); } }
-
-
3-3、CSS-in-JS 框架
使用率：
满意度：
- CSS-in-JS框架这两年的发展总的来说趋于稳定。
- 从使用率来看，依然是Styled Components、CSS Modules、Styled JSX、Emotion这几个老朋友。
- 从满意度来说，绝大部分CSS-in-JS框架的满意度都是在下跌的（别看像是Styled System、Styled JSX的排名往上涨了，但是看满意度的数值的话，都是往下跌的）。CSS Modules算是CSS-in-JS框架的常青树了，满意度一直稳定在85%左右，排名第一。去年的黑马vanilla-extract满意度也一直再往下走，看起来开发者们在使用过这个框架后仍然对其不是特别满意。
四、浏览器环境与设备
下面这张图显示了开发者们会在哪些浏览器中进行开发和测试
可以看到排名前三的是Chrome、Firefox、Edge，仍然是老牌的PC浏览器。在移动端浏览器中，Chrome Android、Safari iOS、Chrome iOS排名前三。而我们的老朋友IE 11，基本已经入土了。
五、CSS使用情况
5-1、开发CSS和JS的时间占比
在开发者们开发CSS和JS的时间占比统计中，可以看到绝大部分开发者都是CSS-JS四六开，还有0.4%的开发者比较极端，100% 使用JS来开发样式。
5-2、遇到浏览器兼容问题的特性
在开发者们认为比较头痛的CSS浏览器兼容问题中，:has()选择器、CSS原生嵌套、@container Queries容器查询位列前三。
5-3、开发者认为CSS缺失的功能
在开发者们认为CSS缺失的功能中：
-
animate-to-auto排名第一，这个选项具体是指「CSS过渡动画效果支持宽高为auto的容器」，详细可参考：css-tricks.com/using-css-t…
-
Masonry Layout排名第二，这是一种更灵活的网格布局方案，目前仍为一个实验性的特性，如下图。详细可参考：developer.mozilla.org/en-US/docs/…
-
排名第三的是老生常谈的话题了，SVG-in-CSS，也就是在CSS中支持SVG的语法。
六、今年 CSS 最大的亮点
使用率进步最多的特性
- :has()选择器以17%的进步幅度成为今年使用率进步最多的特性
收到最多评论的特性
- Subgrid是今年开发者评论数最多的特性
满意度最高的技术
- Open Props作为今年CSS技术的黑马，以91%的满意度成为今年满意度最高的技术。
- 官网：open-props.style/
最多次被提及的技术
- Panda是一个服务端渲染友好的CSS-in-JS框架，解决了一些传统CSS-in-JS框架在服务端渲染中出现的问题，是今年被提及最多次的技术。
- 官网：panda-css.com/docs/overvi…
七、总结
如果让我用三个词来总结今年的CSS生态调查的话，那我会使用「去框架化」、「深度原子化」、「服务端友好化」这三个词。
先说「去框架化」，在今年的生态调查中，我们发现了一个有趣的现象——随着较新的 CSS 功能的使用趋势上升，CSS 框架的使用和满意度均呈下降趋势。这代表着两方面：一方面是当前原生CSS的功能已经相对完善了；另一方面是浏览器厂商会比以前更快地跟进新功能，使开发者们能及时使用上这些新功能了，比如说:has()选择器，或者是CSS原生嵌套等。
然后是「深度原子化」，在这两年CSS领域中，讨论度最高的就是tailwind css，以及它的原子化css样式。而经过几年的发展，50%+的使用率和80%+的满意度已经证明了开发者们对于原子化CSS是买账的，随之而来的就是更进一步的原子化，比如Open Props，原子化CSS变量。而在未来，也许还会有更多、更深度的原子化的框架出现。
最后是「服务端友好化」，随着这两年SSR的发展，以及Next.js等框架的流行，CSS在SSR场景下也暴露出了许多在CSR场景中未曾遇到的问题——尤其是在CSS-in-JS领域，很多老牌的框架在SSR场景的表现都不尽如人意（比如Emotion），而这些也都是下一代CSS-in-JS框架着力解决的问题。在未来，我们应该也能看到更多的SSR友好的框架，而对于那些已有的框架，支持SSR场景，也变得更加重要了起来。
