从 CSS 新特性、单位和选择器、CSS 技术、CSS 工具库、CSS 使用环境和学习 CSS 渠道进行深度的分析，并报告 CSS 的使用学习情况。从这份报告中可以学习到目前最流行的布局，最前沿的特性以及前沿的技术。

CSS 2020

CSS 新特性

布局

在布局这一数据统计页下面，我们可以看到，使用 flex 的人数是最多的，grid 的人数紧跟其后，其它几种布局使用人数也在逐步增加中。而且 grid 的使用人数比例从 54.7%到 73.3%，可以说是上升趋势最快的布局，还有 subgrid 和 Multi-Column Layout，虽然目前使用的人还比较少，但是这些都是最近新出的一些技术，未来的趋势所在。

  1. grid：网格布局：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
  2. Subgrid：子网格: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid
  3. Flexbox: 弹性盒子布局：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
  4. Multi-column Layout：多列布局：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Columns
  5. Writing Modes：CSS 写入模式：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Writing_Modes
  6. Exclusions：Web 布局模块特性(浮动/?环绕布局)：https://webdesign.tutsplus.com/zh-hans/tutorials/css-exclusions--cms-28087
  7. CSS position:sticky：定位：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
  8. CSS Logical Properties：CSS 逻辑属性与值：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Logical_Properties
  9. CSS property: aspect-ratio：单屏布局：定义输出设备中的页面可见区域宽度与高度的比率：https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio
  10. CSS content-visibility：CSS 容器模块：https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility，https://juejin.cn/post/6862315902928044045

图形与图像

在图形与图像一节，统计了很多关于图片适配、裁剪、效果呈现方面的 api，其中可以看到关于 filter 使用的比例是最高的，而上升趋势最快的则是 object-fit，object-fit 在图像适配方面表现很好。

  1. shapes: 形状(用于定义在 CSS 值中使用的几何形状)：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Shapes
  2. object-fit：CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
  3. clip-path：CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
  4. CSS Masking：CSS Masking 是一个 CSS 模块，它定义了部分或完全隐藏视觉元素部分的方法，包括遮罩和剪裁。：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Masking
  5. blend-mode：CSS 数据类型，用于描述当元素重叠时，颜色应当如何呈现。：https://developer.mozilla.org/zh-CN/docs/Web/CSS/blend-mode
  6. filter：CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
  7. backdrop-filte：CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。：https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter

交互

在交互一节，使用最多的是 pointer-events 属性，上升趋势最快的则是 CSS Scroll Snap 属性。

  1. CSS Scroll Snap：CSS 滚动快照：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scroll_Snap
  2. overscroll-behavior：CSS 属性控制浏览器过渡滚动时的表现-也就是滚动到边界：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior
  3. overflow-anchor：CSS 属性提供一种退出浏览器滚动锚定行为的方法，该行为会调整滚动位置以最大程度地减少内容偏移：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow-anchor
  4. touch-action：CSS 属性 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)：https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
  5. pointer-events：CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

排版

在排版一节，使用最多的是@font-face 和 line-break 属性，相对来说其它 属性使用过的人数比例则较低

  1. @font-face 属性，上升趋势最快的是：CSS 属性指定字体：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face
  2. line-break：设置 CSS 属性 line-break 可以用来处理如何断开（break lines）带有标点符号的中文、日文或韩文（CJK）文本的行：https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-break
  3. font-variant：把段落设置为小型大写字母字体：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variant
  4. initial-letter：用于实现首字下沉效果：https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter
  5. font-variant-numeric：CSS 属性控制数字，分数和序号标记的替代字形的使用：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variant-numeric
  6. font-display：属性决定了一个 @font-face 在不同的下载时间和可用时间下是如何展示的：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face/font-display
  7. -webkit-line-clamp：CSS 属性 可以把 块容器 中的内容限制为指定的行数：https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp

动画与过渡

在动画一节，Transitions、Transforms 和 Animations 的使用率都相当之高，均在 90%以上，perspective 也在 36.8%以上，相对来说，css 的动画趋势越来越高

  1. CSS Transitions：CSS 属性定义了如何创建一个平滑地变换 CSS 属性值的方法。它不仅允许创建变换方法，同时也允许通过定时函数来控制变换方法。https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions
  2. CSS Transforms：CSS 模块，它定义了如何在二维或三维空间中转换元素的 CSS 样式：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transforms
  3. CSS Animations：CSS 模块，它定义了如何用关键帧来随时间推移对 CSS 属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations
  4. perspective：CSS 属性 perspective 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

媒体查询

相对于其它 api，媒体查询 api 的使用率普遍偏低，均在 20%以下。

  1. prefers-reduced-motion：CSS 媒体查询特性，用于检测用户的系统是否被开启了动画减弱功能：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-reduced-motion
  2. prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme
  3. color-gamut：CSS 媒体特性可以用来测试用户代理和输出设备支持的大致颜色范围：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-gamut

其它 CSS 特征

在其它的一些 CSS API 中，我们可以看到 Variables：CSS 和 calc()是使用率最高的，@supports 和 CSS Comparison Functions 紧随其后，但是像 contain 和 will-change 在未来性能优化方面都能提供比较好的解决思路，CSS Houdini 的终极目标则是实现 css 属性的完全兼容，它开放 CSS 的 api 给开发者，允许开发者接入浏览器的渲染引擎中。CSS Comparison Functions 则在响应式设计方面具有良好的表现。但是在使用这些 api 的时候需要考虑浏览器兼容性，不过都是未来的趋势

  1. Variables：CSS 模块，允许创建可反复使用的自定义属性：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables
  2. @supports：CSS at-rule 您可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports
  3. contain：CSS 属性允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其它部分。这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能：https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain
  4. will-change：CSS 属性 为 web 开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏：https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change
  5. calc()： 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>, <angle>、<time>、<percentage>、<number>、或 <integer>：https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc()
  6. CSS Houdini： Houdini 是一组 API，它们使开发人员可以直接访问 CSS 对象模型 （CSSOM），使开发人员可以编写浏览器可以解析为 CSS 的代码，从而创建新的 CSS 功能，而无需等待它们在浏览器中本地实现：https://developer.mozilla.org/zh-CN/docs/Web/Houdini
  7. CSS Comparison Functions：CSS 比较函数，clamp(), max() and min()：https://dev.to/ekaterina_vu/css-comparison-functions-clamp-max-and-min-4aon

单位与选择器

单位

在 CSS 的单位方面，使用最多的仍是 px/%/vh,vw/em/rem

选择器

来自社区》内容可见性已经对我的 web 应用的性能产生了巨大影响，但与此同时，我认为优化这一点应该是浏览器的工作，而不是开发者的工作。

  1. 伪元素：伪元素使用最多的是我们比较熟悉的 ::before 和 ::after,但其它的伪元素能做的事情也是非常多的，比如说伪元素::placeholder 可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。
  2. 关系选择器：如后代选择器，子代选择器，兄弟选择器等等，使用率相当高
  3. 伪类选择器：如:first-child,:last-child 等，使用率相当高
  4. 属性选择器：CSS 属性选择器通过已经存在的属性名或属性值匹配元素
  5. 链接/网址：如 :link、:visited 和 :target 是使用率最高的
  6. 交互：如 :hover, :focus 和 :actived 等等
  7. 表单控制：如:checked、:enabled 和 :disabled 等和表单相关的选择器 CSS 生态系统正在经历各种更新，因为像 Bootstrap 这样的较老的主流现在必须适应 Tailwind CSS 等较新的参与者。 更不用说整个 CSS-in-JS 运动了，尽管它还没有成为 CSS 的主流，但是它是非常具有潜力的。

CSS 技术

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

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

  1. 评估: 低使用率，高满意度。值得关注的技术。
  2. 采用: 利用率高，满意度高。采用安全的技术。
  3. 避免: 使用率低，满意度低。目前最好避免使用某些技术。
  4. 分析: 使用率高，满意度低。如果您正在使用这些技术，请重新评估它们。

从表中我们可以看到，像 SASS、postCSS、BEM 都属于利用率高，满意度高的技术，在现有项目中可以评估使用，像 Tailwind CSS、CSS Modules 这些属于高满意度，但是目前使用率还比较低的技术，值得关注与学习，还有一些使用率高，但是满意度较低的技术，比如 Less 和 Bootstrap，如果正在使用，可能需要重新评估

预/后处理

在 CSS 预/后处理 框架这一块，除了 Sass 和 PostCSS 正向反馈有在保持增长之外，其余两个则是负反馈在增加，还有一些其它的技术，比如：styled Component、Sass、CSS-in-JS、Tailwind CSS、CSS Modules 这些技术目前虽然使用率还比较低，但这些满意度相对来说都比较高，未来可以持续关注学习

  1. Sass：https://sass-lang.com/
  2. Less：http://lesscss.org/
  3. PostCSS：https://postcss.org/
  4. stylus：https://stylus-lang.com/

CSS 框架

在框架这块，可以重点关注一下 Tailwind CSS，Bootstrap 属于老牌框架，口碑参半，antd 过去一年来知名度也有较大提升，但上升趋势最快的则是 Tailwind CSS，特点是底层 CSS 框架，具体设计原则可以看官网

Tailwind CSS：https://tailwindcss.com/

CSS 命名规范

命名规范这块，可以关注一下 BEM 命名规范，基本思想是将用户界面分为独立的模块。在这个模块下统计的其实是一些关于 CSS 的方法论，介绍: https://juejin.cn/post/6844904035649077256；比较：https://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use

  1. BEM：BEM 是一种前端命名方法论：http://getbem.com/
  2. acss：原子性使用 CSS：https://acss.io/
  3. oocss：面向对象的 CSS：http://oocss.org/
  4. smacss：可扩展的模块化 CSS:http://smacss.com/
  5. itcss:可扩展和可维护的 CSS 架构: https://itcss.io/

CSS-in-JS

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

Styled Components 的正向反馈是最多的，当然对于 react 的使用者，更加关注的可能是 jsx。css module 的正向反馈也在上升中

  1. Styled Components：https://styled-components.com/
  2. JSS：https://cssinjs.org/?v=v10.5.0
  3. styled-jsx：https://github.com/vercel/styled-jsx
  4. radium：https://formidable.com/open-source/radium/
  5. css-module： https://github.com/css-modules/css-modules

CSS 工具库

工具函数库

stylelint 和 prettier 不必多说，只要是对项目代码规范有所关注的应该都已经引入了这个库或者类似的库，其它两个库也值得关注，在性能方面可以起到一定的作用

  1. stylelint: https://stylelint.io/
  2. prettier: https://prettier.io/
  3. purgeCSS: PurgeCSS 是一种在应用程序中比较字符串来删除未使用的 CSS 的工具： https://purgecss.com/
  4. purifyCSS: PurifyCSS 可以检测你的 CSS 文件，并生成一个不包含无用 CSS 定义的新文件： https://purifycss.online/

浏览器

Chrome 和火狐仍然是使用率最高的两个浏览器

CSS 使用环境

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

学习 CSS 渠道

https://2020.stateofcss.com/zh-Hans/resources/

  1. https://css-tricks.com/
  2. https://dev.to/