共计 2209 个字符，预计需要花费 6 分钟才能阅读完成。
介绍
CSS 从 1994 年 10 月首次被提出，到目前为止曾经 20 余年，然而 CSS 早已产生了翻天覆地的变动，2020 的 CSS 又是如何的呢？
咱们当初能够应用 CSS Grid 轻松制作动静或响应式的布局，以更少的代码来进行自适应布局。CSS-in-JS 无需依赖全局样式表，咱们能够将款式与组件写在一起去构建主题化的设计零碎。
最重要的是，Tailwind CSS 忽然呈现，通过它的实用至上的 CSS 的类名应用，迫使咱们重新考虑传统的语义类名称的设计。
本次考察一共统计了 10k+ 的人，由 Sacha Greif 设计、写作以及编码，Raphaël Benitte 进行数据分析和数据可视化。还有包含 Chen Hui-Jing, Philip Jägenstedt, Adam Argyke, Ahmad Shadeed, Robert Flack, Dominic Nguyen, Fantasai, and Kilian Valkhof. 等人的致力。
本次次要能够从 6 个方向（新个性、单位和选择器、CSS 技术、CSS 工具库、CSS 应用环境和学习 CSS 渠道）进行了深度的报告 CSS 的应用学习状况，从本次考察，能够让你理解目前最风行的布局，最前沿的个性以及前沿的技术库等等~（本文会举例集体感觉最值得讲的进行形容~，当然我感觉整个报告都十分的迷人，都十分值得看，然而因为篇幅起因，我对某些局部进行了删减，强烈建议去看完整版！！！https://2020.stateofcss.com/zh-Hans/）
先通过 5 张图来看看本次考察对象的样本形成。
采样人员散布
人员的薪资散布
工作年限
工作岗位
CSS 熟练程度
新个性
近年来，CSS 呈现了大量的新个性，然而社区须要工夫来排汇新个性，所以 CSS 的一些新个性的采用率速度有点慢。
以下图表显示了按类别分组的所有个性的不同采用率。
外圈的大小对应于理解某项性能的用户总数，而内圈则代表理论应用过该性能的用户。
布局
兴许 Grid 和 Flexbox 对你来说是最相熟的，从上表也能看进去大部分的人应用了 flex，因为通过它，只有写很少的代码就能写出多样化的代码。然而 Grid 在往年的考察中能够说回升的趋势很快。
还有像 Subgrid 和 Multi-Column Layout 你可能不相熟。然而置信如果看过 往年 2020 web.dev live 的小伙伴肯定记得 Ten modern layouts in one line of CSS，外面就大量应用了 Subgrid 的个性，仅仅用一行代码实现 当初风行的，自适应垂直居中、三列布局、圣杯布局和双飞翼布局等等布局。（也强烈建议看下面那篇文章，当我想翻译那篇文章的时候，发现掘金曾经有人先翻译了，英文看着吃力的能够去搜中文版）
图形与图像
还在懊恼图片的适配问题吗？兴许你能够应用 object-fit试试。
交互
还记得我在上一篇从破解某设计网站谈前端水印 (具体教程) 中讲的 pointer-events 吗
排版
须要多行 … 的时候，line-clamp 是个好帮手。
动画与适度
Transitions、Transforms、Animations 仍旧是当下支流的动画形式。
媒体查问
对 prefers-color-scheme 眼生吗，利用好它咱们就能够适配 mac 的深色模式~
其余特色
calc 帮忙了咱们计算单位，提前申明will-change 有助于咱们解决动画时候进步性能。
单位和选择器
px/%/em/rem 必定是老牌 CSS 单位，然而 vh,vw 的使用率也逐步回升了~
CSS 技术
CSS 生态系统正在经验各种更新，因为像 Bootstrap 这样的较老的支流当初必须适应 Tailwind CSS 等较新的参与者。更不用说整个 CSS-in-JS 静止了，只管它还没有成为 CSS 的支流，然而它是十分具备后劲的。
预 / 后处理
满意度、趣味、应用和知晓率排名。
SaSS 仍旧是大哥大，这里能够提一下 libsass 曾经弃用，曾经应用了 dart-sass，社区各个正在对齐中，当前再也不必放心 node-sass 装置编译出错了。
CSS 框架
满意度、趣味、应用和知晓率排名。
CSS 框架这里真的是神仙打架，又诞生了一些新的工具库，然而 Tailwind CSS 仍旧处于不可撼动的位置（想起了几年前还是 BootStrap 霸榜，不禁感叹本人真的老了老了。）
CSS 命名标准
满意度、趣味、应用和知晓率排名。
各个标准比拟能够看 https://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use/
标准是写组件库的时候尤其重要的一环。
CSS-in-JS
满意度、趣味、应用和知晓率排名。
随着 React 这样的库衰亡，CSS-in-JS 写起来真的太爽了。驰名的框架 Material UI（实现了 Google 的 Material Design）就是采纳的这样的模式。
CSS 工具库
CSS 应用环境
CSS 曾经越来越趋于多终端设备化了, 不仅限于 PC/Mobilede。
学习 CSS 渠道
再举荐两个国内集体比拟看好的 CSS 博客 一个是张鑫旭的博客（https://www.zhangxinxu.com/wordpress/）另一个是国服第所有图仔的博客（https://github.com/chokcoco/iCSS/issues）
最初
如果我的文章有帮忙到你，心愿你也能帮忙我，欢送关注我的微信公众号 秋风的笔记 ，回复 好友 二次，可加微信并且退出交换群， 秋风的笔记 将始终陪伴你的左右。
