2020 年最热门的 CSS 技术

作者：Nwose Lotanna✏️

多年来，CSS 及其社区已从单纯的样式表发展成为一个完整的技术生态系统，涵盖了 Bootstrap 和 Materialize 等框架、Sass 和 Less 等预处理器，甚至还有 CSS-in-JS 等新兴概念。2020 年的前端 Web 开发不再仅仅涉及编写 CSS，还需要了解相关技术以及在特定场景下应该使用哪些技术。

首份“ 2019 CSS 现状”调查报告记录并清晰地展现了当今全球 CSS 用户的观点。数据点涵盖 CSS 库和框架、特性、单元和选择器等等。

这份报告让我们得以一窥前端开发的未来，并且完全聚焦于 CSS。在我看来，“CSS 现状”报告已经是首屈一指的纯 CSS 开发者调查报告，我希望它能在未来几年成为前端开发者社区的主流。

在本文中，我们将了解 2020 年最受欢迎的 CSS 技术以及开发人员对 CSS 概念的定位，例如预处理器、框架以及新颖的 CSS-in-JS。

CSS-in-JS

十多年前，CSS 经历了一次新的发展，核心规则被覆盖，新功能被创建，形成了一项名为预处理器的新技术。最近，一项名为 CSS-in-JS 的革命性新技术应运而生。

CSS-in-JS 允许您使用 JavaScript 而不是 CSS 来设置演示文稿的样式。然后，当您的应用程序运行时，JavaScript 会被解析并生成 CSS，并直接附加到您的 DOM。这有助于将 CSS 抽象到组件级别，并使您的样式更易于维护。它在 CSS 社区中风靡一时；以下是一些最常用的技术。

样式组件

styled-components 是一个 CSS-in-JS 库，可帮助您使用可视化基元和最佳的现代浏览器技术来设置 React 组件的样式。它是一种优化的 CSS 增强功能，用于设置应用程序组件的样式，让您想起 CSS 模块。

它被超过 20 万个项目使用，并且拥有一个强大且快速发展的社区。根据调查显示，高达 79% 的 CSS 用户听说过它（考虑到它才刚刚出现三年，这已经相当惊人了），其中高达33% 是重复用户。另有 26% 的人表示希望学习它。

这是我之前写的一篇有关 styled-components 的文章。

CSS 模块

CSS 模块是 CSS 文件，其中的类名和转换在本地范围内，并且所有链接和导入都采用模块请求格式，如下所示：

import styles from "./style.css";
// import { className } from "./style.css";

它们编译为一种称为可互操作 CSS 的低级交换格式，但编写方式与普通 CSS 文件一样：

.danger-heading {
  color: red;
}

从 JS 模块导入 CSS 模块时，它会导出一个对象，其中包含从本地名称到全局名称的所有映射。21 % 的受访者使用了该模块，并在 GitHub 上获得了13,000 次star 。这方面存在很大的认知差距，这对于团队来说是一个很好的机会，可以发布更多资源来帮助教育 CSS 用户。

样式化的 JSX

根据Next.js 官方博客 的介绍，Styled JSX 是一个 CSS-in-JS 库，允许你编写封装且有作用域的 CSS 来设置组件的样式。你为一个组件引入的样式不会影响其他组件，因此你可以随意添加、更改和删除样式，而不必担心意外的副作用。

根据 GitHub 的数据，CSS 的每周下载量高达35 万次，目前已有 5.1 万个项目在使用，可见其在不久的将来有着巨大的应用前景。目前，约有54% 的受访 CSS 用户尚未听说过它，因此我相信到 2020 年底，这一数字将会发生显著变化。

其他 CSS-in-JS 库包括JSS、Emotion、Aphrodite和Radium。

预处理器

在 CSS 的发展史上，Sass 和 Less 的出现要早得多。这些预处理器引入了一些 CSS 中从未使用过的新功能，例如变量以及编程语言中令人惊艳的样式嵌套概念。这些都发生在 CSS 开始追赶它们之前。

萨斯

Sass 被认为是世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言。它兼容所有 CSS 版本，至今已持续维护约 13 年，并且拥有众多炫酷的功能。许多框架都基于 Sass 构建，其中之一就是Compass。

目前，Sass 已被超过 150 万个项目使用，约占调查受访者的 80% —— 我敢说，每个人都喜欢 Sass。

较少的

Leaner Style Sheets（俗称 Less）是另一个出色的 CSS 扩展，它使用 Less.js 将 Less 样式转换为 CSS 样式。它将混合宏和变量等核心 JS 概念引入 CSS，使 JavaScript 开发人员能够轻松掌握。运行时，它会将样式预处理为纯 CSS。

目前已有超过 100 万个项目使用CSS，超过 98% 的用户听说过它，其中 25% 是回头客，11% 愿意学习。

您可能想要查看的另一个预处理器库是Stylus，它也拥有一个不断壮大的社区。

CSS 框架

任何关于 CSS 技术的讨论，如果没有提到像 Bootstrap 这样的用户界面工具包，都是不完整的。这些工具包让 CSS 用户，尤其是想要构建面向客户端的用户界面的初学者，的工作变得轻松便捷。在本节中，我们将介绍一些备受欢迎的框架。

引导程序

Bootstrap 是一款开源的移动优先工具包，可用于开发 HTML、CSS 和 JS 代码。您可以使用 Sass 变量和混合宏、响应式网格系统、丰富的预置组件以及基于 jQuery 构建的强大插件，快速创建您想法的原型或构建整个应用。

根据调查显示，目前 Bootstrap 的用户超过 130 万，其中45% 是回头客。多年来，一些人已经转向更新、更有趣的框架，但 Bootstrap 仍然拥有庞大的用户群。

语义用户界面

Semantic UI 是一个开发框架，它使用人性化的 HTML 代码，帮助您创建美观且响应迅速的布局。Semantic UI 的 HTML 代码简洁明了，将单词和类视为可替换的概念。超过 11,000 个项目正在使用它，超过64 % 的 CSS 用户听说过它，另有 21% 的用户愿意学习它。

布尔玛

Bulma 是一个基于 Flexbox 的免费开源 CSS 框架，拥有超过 20 万名开发者。它 100% 响应式、专注于移动设备、模块化且开源。目前，超过 86,000 个项目正在使用 Bulma ，10% 的受访者表示曾多次使用过 Bulma。Bulma每月下载量高达46 万次，社区正在蓬勃发展，这也为进一步提升社区知名度提供了机会。

Pure.css

Pure.css 是一套精简、响应式的 CSS 模块，可用于所有 Web 项目。Pure 基于Normalize.css构建，提供原生 HTML 元素的布局和样式，以及最常见的 UI 组件。Pure 非常小巧——整套模块压缩后大小仅为 3.8kB。

目前已有超过 3,000 个项目使用它，超过18 % 的 受访 CSS 用户已经使用过它或想要学习它。

Tailwind CSS

Tailwind CSS 是一个实用优先的 CSS 框架，用于快速构建自定义设计。Tailwind CSS 是一个高度可定制的底层 CSS 框架，它为您提供了构建定制设计所需的所有构建块，无需费力覆盖任何烦人的、固执己见的样式。

目前已有超过 25,000 个项目使用它，根据调查的兴趣指示指标，它是最受欢迎的 CSS 框架，14% 的受访 CSS用户希望学习使用它。

其他 CSS 框架包括Materialize、Foundation、Ant design、UI Kit、Primer和Tachyons。

结论

本文介绍了各种 CSS 技术，以及它们在社区中的热度，从 CSS-in-JS 到预处理器，甚至框架。CSS-in-JS 是 CSS 社区最新推出的技术之一，我对这项技术的未来充满期待，尤其是像 styled-components 和 Tailwind CSS 这样的库和框架的蓬勃发展。你最喜欢的 CSS 技术是什么？请在评论区留言告诉我们！

您的前端是否占用了用户的 CPU？

随着 Web 前端日益复杂，资源占用大的功能对浏览器的要求也越来越高。如果您有兴趣监控和跟踪生产环境中所有用户的客户端 CPU 使用率、内存使用率等数据，不妨尝试 LogRocket。

LogRocket就像 Web 应用的 DVR，记录 Web 应用或网站中发生的一切。您无需猜测问题发生的原因，而是可以汇总和报告关键的前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误。

实现 Web 应用程序调试方式的现代化 —开始免费监控。

2020 年最受欢迎的 CSS 技术一文最先出现在LogRocket 博客上。