2020 全球 CSS 报告,大家都在用什么样的技术?

Wesley13
• 阅读 726

本文来源与公众号「秋风的笔记」

介绍

CSS 从 1994 年 10 月首次被提出,到目前为止已经20余年,但是 CSS 早已发生了天翻地覆的变化,2020 的CSS  又是如何的呢?

我们现在可以使用 CSS Grid 轻松制作动态或响应式的布局,以更少的代码来进行自适应布局。CSS-in-JS 无需依赖全局样式表,我们可以将样式与组件写在一起去构建主题化的设计系统。

最重要的是,Tailwind CSS 突然出现,通过它的实用至上的 CSS 的类名使用,迫使我们重新考虑传统的语义类名称的设计。

本次调查一共统计了 10k+ 的人,由 Sacha Greif[1] 设计、写作以及编码,Raphaël Benitte[2] 进行数据分析和数据可视化。还有包括Chen Hui-Jing[3], Philip Jägenstedt[4], Adam Argyke[5], Ahmad Shadeed[6], Robert Flack[7], Dominic Nguyen[8], Fantasai[9], and Kilian Valkhof[10]. 等人的努力。

本次主要可以从6个方向(新特性、单位和选择器、CSS技术、CSS工具库、CSS使用环境和学习CSS渠道)进行了深度的报告CSS的使用学习情况,从本次调查,可以让你了解目前最流行的布局,最前沿的特性以及前沿的技术库等等~  (本文会举例个人觉得最值得讲的进行描述~,当然我觉得整个报告都非常的迷人,都非常值得看,但是因为篇幅原因,我对某些部分进行了删减,强烈建议去看完整版!!!https://2020.stateofcss.com/zh-Hans/)

先通过 5 张图来看看本次调查对象的样本构成。

采样人员分布

2020 全球 CSS 报告,大家都在用什么样的技术?

人员的薪资分布

2020 全球 CSS 报告,大家都在用什么样的技术?

工作年限

2020 全球 CSS 报告,大家都在用什么样的技术?

工作岗位

2020 全球 CSS 报告,大家都在用什么样的技术?

CSS 熟练程度

2020 全球 CSS 报告,大家都在用什么样的技术?

新特性

近年来,CSS出现了大量的新特性,但是社区需要时间来吸收新特性,所以CSS的一些新特性的采用率速度有点慢。

以下图表显示了按类别分组的所有特性的不同采用率。

外圈的大小对应于了解某项功能的用户总数,而内圈则代表实际使用过该功能的用户。

2020 全球 CSS 报告,大家都在用什么样的技术?

布局

2020 全球 CSS 报告,大家都在用什么样的技术?

也许 Grid 和 Flexbox 对你来说是最熟悉的,从上表也能看出来大部分的人使用了 flex,因为通过它,只要写很少的代码就能写出多样化的代码。但是 Grid 在今年的调查中可以说上升的趋势很快。

还有像 Subgrid[11] 和 Multi-Column Layout[12] 你可能不熟悉。但是相信如果看过 今年2020 web.dev live 的小伙伴一定记得 Ten modern layouts in one line of CSS[13] ,里面就大量使用了 Subgrid 的特性,仅仅用一行代码实现现在流行的,自适应垂直居中、三列布局、圣杯布局和双飞翼布局等等布局。(也强烈建议看上面那篇文章,当我想翻译那篇文章的时候,发现掘金已经有人先翻译了,英文看着吃力的可以去搜中文版)

图形与图像

2020 全球 CSS 报告,大家都在用什么样的技术?

还在烦恼图片的适配问题吗? 也许你可以使用 object-fit 试试。

交互

2020 全球 CSS 报告,大家都在用什么样的技术?

还记得我在上一篇从破解某设计网站谈前端水印(详细教程)[14]中讲的 pointer-events

排版

2020 全球 CSS 报告,大家都在用什么样的技术?

需要多行... 的时候,**line-clamp** 是个好帮手。

动画与过度

2020 全球 CSS 报告,大家都在用什么样的技术?

TransitionsTransformsAnimations 依旧是当下主流的动画方式。

媒体查询

2020 全球 CSS 报告,大家都在用什么样的技术?

prefers-color-scheme 眼熟吗,利用好它我们就可以适配 mac 的深色模式~

其他特征

2020 全球 CSS 报告,大家都在用什么样的技术?

calc 帮助了我们计算单位,提前声明will-change 有助于我们处理动画时候提高性能。

单位和选择器

2020 全球 CSS 报告,大家都在用什么样的技术?

2020 全球 CSS 报告,大家都在用什么样的技术?

px/%/em/rem肯定是老牌CSS 单位,但是vh,vw 的使用率也逐渐上升了~

CSS技术

CSS 生态系统正在经历各种更新,因为像 Bootstrap 这样的较老的主流现在必须适应 Tailwind CSS 等较新的参与者。更不用说整个 CSS-in-JS 运动了,尽管它还没有成为 CSS 的主流,但是它是非常具有潜力的。

预/后处理

满意度、兴趣、使用和知晓率排名。

2020 全球 CSS 报告,大家都在用什么样的技术?

SaSS 依旧是大哥大,这里可以提一下 libsass 已经弃用,已经使用了 dart-sass,社区各个正在对齐中,以后再也不用担心 node-sass 安装编译出错了。

CSS框架

满意度、兴趣、使用和知晓率排名。

2020 全球 CSS 报告,大家都在用什么样的技术?

CSS 框架这里真的是神仙打架,又诞生了一些新的工具库,但是 Tailwind CSS 依旧处于不可撼动的地位 (想起了几年前还是 BootStrap 霸榜,不禁感叹自己真的老了老了。)

CSS 命名规范

满意度、兴趣、使用和知晓率排名。

2020 全球 CSS 报告,大家都在用什么样的技术?

各个规范比较可以看 https://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use/

规范是写组件库的时候尤其重要的一环。

CSS-in-JS

满意度、兴趣、使用和知晓率排名。

2020 全球 CSS 报告,大家都在用什么样的技术?

随着 React 这样的库兴起,CSS-in-JS 写起来真的太爽了。著名的框架 Material UI [15] (实现了 Google 的 Material Design)就是采用的这样的模式。

CSS工具库

2020 全球 CSS 报告,大家都在用什么样的技术?

2020 全球 CSS 报告,大家都在用什么样的技术?

CSS使用环境

2020 全球 CSS 报告,大家都在用什么样的技术?

2020 全球 CSS 报告,大家都在用什么样的技术?

CSS 已经越来越趋于多终端设备化了,不仅限于PC/Mobilede 。

学习CSS渠道

2020 全球 CSS 报告,大家都在用什么样的技术?

2020 全球 CSS 报告,大家都在用什么样的技术?

再推荐两个国内个人比较看好的CSS博客 一个是张鑫旭的博客(https://www.zhangxinxu.com/wordpress/)另一个是国服第一切图仔的博客(https://github.com/chokcoco/iCSS/issues)

参考资料

[1]

Sacha Greif: https://twitter.com/sachagreif

[2]

Raphaël Benitte: https://twitter.com/benitteraphael

[3]

Chen Hui-Jing: http://chenhuijing.com/

[4]

Philip Jägenstedt: https://blog.foolip.org/

[5]

Adam Argyke: https://nerdy.dev/

[6]

Ahmad Shadeed: https://www.ishadeed.com/

[7]

Robert Flack: https://github.com/flackr

[8]

Dominic Nguyen: https://www.chromatic.com/

[9]

Fantasai: http://fantasai.inkedblade.net/

[10]

Kilian Valkhof: https://kilianvalkhof.com/

[11]

Subgrid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Grid\_Layout/Subgrid

[12]

Multi-Column Layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Columns

[13]

Ten modern layouts in one line of CSS: https://web.dev/one-line-layouts/

[14]

从破解某设计网站谈前端水印(详细教程): https://juejin.cn/post/6900713052270755847

[15]

Material UI : https://github.com/mui-org/material-ui

❤️ 谢谢支持

1.喜欢的话别忘了分享、点赞、在看三连哦~。

2.长按下方图片,关注「前端从进阶到入院」,获取我分类整理的原创精选面试热点文章,Vue、React、TS、手写题等应有尽有,我进入字节、滴滴、百度的小伙伴们说文章对他们帮助很大,希望也能帮助到你。

2020 全球 CSS 报告,大家都在用什么样的技术?

本文分享自微信公众号 - 前端从进阶到入院(code_with_love)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
2年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
2年前
Docker 部署SpringBoot项目不香吗?
  公众号改版后文章乱序推荐,希望你可以点击上方“Java进阶架构师”,点击右上角,将我们设为★“星标”!这样才不会错过每日进阶架构文章呀。  !(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)  2
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这