bootstrap 调查问卷_【第2140期】2020 CSS 现状调查

前言

一年一度的CSS调查报告出来了，是由@Raphaël Benitte、@Sacha Greif发起调查。啥时候可以有一份国内的调查报告呢？看看你现在用的技术现状如何呢？

正文从这开始~~

介绍

忘记你所知道的关于CSS的一切。或者至少，要准备好重新考虑很多东西。如果像我一样，你已经写了十多年的CSS，那么2020年的CSS看起来和你以前的CSS完全不一样。

取代断点，我们现在可以利用CSS Grid来制作动态的、响应式的布局，用更少的代码行来适应任何视口大小。CSS-in-JS不再依赖全局样式表，而是让我们将我们的样式与我们的组件放在一起，构建可主题设计系统。

而最重要的是，Tailwind CSS突然出现，通过使用实用性优先的CSS，迫使我们重新考虑传统的语义类名的教条。

无论这些变化是否让你想写一篇夸张的博客文章，还是愤怒的Twitter咆哮，我们都会在这里呈现数据，强调趋势，并希望能引导你度过CSS的又一个多事之秋

用户画像

让我们了解真实的你。

国家或地区

语言

受访者填写调查问卷时选择了哪种语言？

薪资

年收入(美元)

年限

你已于当前领域工作(研究)多长时间？

公司规模

所在公司规模分析

来源

受访者是如何了解这项调查的？

这张图汇总了推荐人、URL参数和自由形式的答案的组合。

• State of JS：State of JS邮件列表。

• State of CSS：CSS的状态邮件列表；也匹配电子邮件、通过电子邮件等。

• work：匹配工作、同事、同事等。

性别

种族和民族

职位名称

使用一个名词像别人介绍你从事的工作？

CSS 熟练程度

对 CSS 了解得怎样？

• 无：实际上没有 CSS 经验

• 初学 ：使用 CSS 框架以及调整现有样式

• 中等 ：知道特定规则，能够创建布局

• 高级 ：精通动画、交互、过渡等

• 资深 ：能够以统一的方法论从零构建整个前端站点的样式

JavaScript 熟练程度

对 JavaScript 了解得怎样？

• 无：不会 JavaScript

• 初学：会一点 JavaScript 或 jQuery 代码

• 中等：会用一些现成的前端流行框架，如 (React、 Vue、 等)

• 高级：从 0 到 1 构建前端技术栈

• 资深：能处理负责的前端业务(状态管理，数据管理等)

Back-end 熟练程度

对 后端开发 了解得怎样？

- 无：无法完成任何后端工作 - 初学：会配置一体化 CMS(WordPress 等)或静态站点生成器(Jekyll 等) - 中等：能够使用现有框架开发应用(Rails、Laravel 等) - 高级：从零搭建整个后端(Go、Node.js 等) - 资深：能够掌控复杂的多台服务器或微服务架构

功能

近年来，CSS 已经看到了新特性的激增，所以正如你所预期的那样，由于社区需要时间来吸收新的特性，CSS 的应用已经落后了一些。

使用概况

这个图表显示了按类别分组的所有功能的不同采用率。

外圈的大小对应于知道某个特性的用户总数，而内圈则代表实际使用该特性的用户总数。

将鼠标悬停在每个节点上，以查看详细数据，并在其上覆盖代表调查受访者总数。

知识得分

在调查中提到的所有 CSS 特性中，被调查者知道多少？

布局

使用什么布局方式进行元素布局？

Grid

Subgrid

Flexbox

Multi-Column Layout

Writing Modes

Exclusions

CSS position:sticky

CSS Logical Properties

CSS property: aspect-ratio

CSS content-visibility

图形与图像

控制形状与元素的显示方式。

Shapes

object-fit

clip-path

Masking

blend-mode

Filters & Effects

backdrop-filter

交互

使用者如何进行页面交互？

Scroll Snap

overscroll-behavior

overflow-anchor

touch-action

pointer-events

排版

文本排版设置。

@font-face

Line Breaking Properties

font-variant

initial_letter

font-variant-numeric

font-display

line-clamp

动画与过渡

给元素加上动画或过渡效果。

Transitions

Transforms

Animations

Perspective

媒体查询

网站多端解决方案

prefers-reduced-motion

prefers-color-scheme

color-gamut

其他特征

其他 CSS 特征

Variables

@supports

Contain

will-change

calc()

CSS Houdini

CSS Comparison Functions

单位和选择器

测试你对 CSS 单位和选择器了解多少

单位

你曾用过哪些 CSS 单位？

伪元素

你曾使用过哪些 CSS 伪元素？

关系选择器 (Combinators)

你曾使用哪些关系选择器？

伪类选择器

你曾使用哪些伪类选择器？

属性选择器

你曾使用哪些属性选择器？

链接

你曾使用哪些关于链接的选择器？

交互

你曾使用哪些关于交互的选择器？

表单控制

你曾使用哪些关于表单控制的选择器？

技术介绍

CSS的生态系统正在经历某种程度的更新，因为像Bootstrap这样的老牌主流现在必须适应像Tailwind CSS这样的新进入者。更不用说整个CSS-in-JS运动了，虽然它还没有成为CSS的主流，但还是相当有活力。

满意度与使用率

这张图显示了每种技术的满意度占其总用户数的比例。它可以分为四个象限。

• ASSESS: 低使用率，高满意度 低使用率，高满意度。值得关注的技术。

• ADOPT：使用率高，满意度高。安全的技术，可以采用。

• 避免：低使用率，满意度低。低使用率，低满意度。目前可能最好避免的技术。

• 分析：高使用率，低满意度。如果你目前正在使用这些技术，请重新评估。

预/后处理

健壮 CSS 的处理器。

排名

满意度、兴趣度、使用度、知名度比排名。

知晓率低于10%的技术不包括在内。每个比率定义如下。

• 满意度：会再次使用与不会再次使用。

• 兴趣：想学习VS不感兴趣。

• 使用情况：会再次使用+不会再次使用VS认知度。

• 认识度：总数--从未听说过。

经验随着时间的推移

一段时间以来对所调查技术的意见概述。

不包括只有一年数据的技术。

正/负分离

这个图表将中轴线两侧的积极("想学习"、"会再次使用")与消极("不感兴趣"、"不会再次使用")体验进行了划分。

条形粗细代表了解某项技术的受访者人数。

Sass

Less

PostCSS

Stylus

其他工具

这一类的其他工具(自由形式的答案)。

整体幸福感

在1分(非常不满意)到5分(非常满意)的范围内，开发者对该类产品目前的整体状况有多满意？

CSS 框架

提供预先设置好组件和样式库

排名

满意度、兴趣度、使用度、知名度比排名。

知晓率低于10%的技术不包括在内。每个比率定义如下。

• 满意度：会再次使用与不会再次使用。

• 兴趣：想学习VS不感兴趣。

• 使用情况：会再次使用+不会再次使用VS认知度。

• 认识度：总数--从未听说过。

经验随着时间的推移

一段时间以来对所调查技术的意见概述。

不包括只有一年数据的技术。

正/负分离

这个图表将中轴线两侧的积极("想学习"、"会再次使用")与消极("不感兴趣"、"不会再次使用")体验进行了划分。

条形粗细代表了解某项技术的受访者人数。

Bootstrap

Materialize CSS

Ant Design

Semantic UI

Bulma

Foundation

UIKit

Tachyons

Primer

Tailwind CSS

PureCSS

Skeleton

Spectre.css

其他工具

这一类的其他工具(自由形式的答案)。

整体幸福感

在1分(非常不满意)到5分(非常满意)的范围内，开发者对该类产品目前的整体状况有多满意？

CSS 方法

编写更简洁 CSS 代码的方式

排名

满意度、兴趣度、使用度、知名度比排名。

知晓率低于10%的技术不包括在内。每个比率定义如下。

• 满意度：会再次使用与不会再次使用。

• 兴趣：想学习VS不感兴趣。

• 使用情况：会再次使用+不会再次使用VS认知度。

• 认识度：总数--从未听说过。

经验随着时间的推移

一段时间以来对所调查技术的意见概述。

不包括只有一年数据的技术。

正/负分离

这个图表将中轴线两侧的积极("想学习"、"会再次使用")与消极("不感兴趣"、"不会再次使用")体验进行了划分。

条形粗细代表了解某项技术的受访者人数。

BEM

Atomic CSS (Utility-first CSS)

OOCSS

SMACSS

ITCSS

CUBE CSS

其他工具

这一类的其他工具(自由形式的答案)。

整体幸福感

在1分(非常不满意)到5分(非常满意)的范围内，开发者对该类产品目前的整体状况有多满意？

CSS-in-JS

实现 JavaScript 编写 CSS 代码的库

排名

满意度、兴趣度、使用度、知名度比排名。

知晓率低于10%的技术不包括在内。每个比率定义如下。

• 满意度：会再次使用与不会再次使用。

• 兴趣：想学习VS不感兴趣。

• 使用情况：会再次使用+不会再次使用VS认知度。

• 知晓度：总数--从未听说过

经验随着时间的推移

一段时间以来对所调查技术的意见概述。

不包括只有一年数据的技术。

正/负分离

这个图表将中轴线两侧的积极("想学习"、"会再次使用")与消极("不感兴趣"、"不会再次使用")体验进行了划分。

条形粗细代表了解某项技术的受访者人数。

Styled Components

JSS

Styled JSX

Radium

Emotion

CSS Modules

Styled System

Stitches

Styletron

Fela

Linaria

Astroturf

其他工具

这一类的其他工具(自由形式的答案)

整体幸福感

在1分(非常不满意)到5分(非常满意)的范围内，开发者对该类产品目前的整体状况有多满意？

其他工具

其他CSS工具

工具函数库

常用的工具函数库有？

其他工具函数库

其他工具函数库(填写名称)。

文本编辑器

经常使用那(些)文字編輯器？

其他文本编辑器

其他文本编辑器(填写名称)

浏览器

常用用于开发的浏览器有哪些？

其他浏览器

其他浏览器(填写名称)。

环境

你于什么环境下编写 CSS 代码？

浏览器

在那些浏览器中进行测试？

设备

在什么设备上进行测试？

CSS for Print

使用过打印样式(print styles)吗？

说明

• 从未：我从未用过 print styles (打印样式)

• 偶尔 ：我偶尔使用 print styles (打印样式)

• 常用 ：我经常使用 print styles (打印样式)

• 重度使用：我重度使用 print styles (打印样式)

CSS for Email 客户端

有些写过邮件客户端样式吗？

说明

• 从未 ：我从未用过 email styles (邮件样式)

• 偶尔 ：我偶尔使用 email styles (邮件样式)

• 常用 ：我经常使用 email styles (邮件样式)

• 重度使用：我重度使用 email styles (邮件样式)

想法

CSS 是否易于学习

CSS 的演进速度慢

应避免如 「.center、 .large-text」 等非语义、机械式类名

应避免像是「.foo .bar ul li {...}」 这样的选择器嵌套

CSS 是一门编程语言

我乐意写 CSS

总体而言，你对现有 WEB 技术满意吗？

总的来讲，你对现有 CSS 满意吗？

目前觉得 CSS 缺少什么？

结论

如果一个JavaScript开发人员写了一行CSS代码，他们现在是不是一个CSS开发人员？

这个编程kōan说明了Web开发世界的一个明显趋势：随着越来越多的CSS开发者被赋予学习JavaScript的任务，JavaScript开发者也开始意识到CSS这件事可能不仅仅是font-weight: bold;。

因此，询问 "CSS的现状 "本质上是一个棘手的命题：根据你问谁，你可能会得到完全不同的答案! 那你怎么知道哪一个是正确的呢？

这里有另一个kōan给你：正确的答案是没有正确的答案。这里介绍的众多工具、方法论、框架和库中的每一种都在庞大的前端生态系统中占有一席之地。

构建一个复杂的React应用？风格化组件是一个不错的选择。设计一个静态登陆页面？使用Sass是不会错的! 即使Bootstrap已经失去了一些原始的炒作因素，但当涉及到主题和插件的数量时，你无法击败它。

关于本文 原文：https://2020.stateofcss.com/zh-Hans/

为你推荐

【第2100期】2020年你不应该错过的CSS新特性

【第2101期】纯CSS实现密室逃脱游戏

欢迎自荐投稿，前端早读课等你来