2020全球CSS报告新鲜出炉,前端从业者平均年薪35w

新闻 前端
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 [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 张图来看看本次调查对象的样本构成。

采样人员分布 


 


人员的薪资分布 



工作年限 



工作岗位 



CSS 熟练程度 




新特性

近年来,CSS出现了大量的新特性,但是社区需要时间来吸收新特性,所以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 的特性, 仅仅用一行代码实现 现在流行的,自适应垂直居中、三列布局、圣杯布局和双飞翼布局等等布局。(也强烈建议看上面那篇文章,当我想翻译那篇文章的时候,发现掘金已经有人先翻译了,英文看着吃力的可以去搜中文版)

图形与图像 


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


交互 



还记得我在上一篇 从破解某设计网站谈前端水印(详细教程) [14] 中讲的 ​​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 [15] (实现了 Google 的 Material Design)就是采用的这样的模式。

CSS工具库 



CSS使用环境 



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

学习CSS渠道 



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


责任编辑:张燕妮 来源: 秋风的笔记
相关推荐

2013-05-09 10:30:44

开源软件开源项目

2018-03-27 09:11:02

程序员AI大数据

2021-01-14 07:44:21

JS 现状CSS

2021-10-16 07:15:40

勒索软件攻击数据泄露

2013-11-14 10:34:57

Android 4.4特性

2012-04-26 10:56:05

jQuery效果

2010-12-01 11:44:56

IT从业者

2011-11-21 11:27:30

品牌营销

2019-03-15 15:37:51

自动驾驶排名企业

2010-08-02 11:09:45

Flex4

2020-03-04 14:16:45

安全从业者甲方乙方

2020-05-13 11:25:38

移动支付APP排名

2014-07-21 15:37:19

互联网跳槽调查

2021-01-19 22:44:26

区块链新基建数据

2015-04-13 18:29:54

H3 BPM

2013-04-11 13:59:39

2009-09-08 13:46:13

CCNA中文版

2013-07-29 09:06:41

2020-06-12 15:26:51

网络速度移动网络下载
点赞
收藏

51CTO技术栈公众号