关于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/)

先通过 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 是个好帮手。

动画与适度

TransitionsTransformsAnimations 仍旧是当下支流的动画形式。

媒体查问

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)

最初

如果我的文章有帮忙到你,心愿你也能帮忙我,欢送关注我的微信公众号 秋风的笔记,回复好友 二次,可加微信并且退出交换群,秋风的笔记 将始终陪伴你的左右。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据