本文摘要：先容CSS 从 1994 年 10 月首次被提出，到现在为止已经20余年，可是 CSS 早已发生了天翻地覆的变化，2020的CSS 又是如何的呢？

先容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/）先通过 4 张图来看看本次观察工具的样本组成。人员的薪资漫衍事情年限事情岗位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渠道。

本文来源：开云手机在线登陆入口-www.dusalai.com