2022 年将遵循的 5 个前端趋势

已发表: 2020-12-11

网络上有大量“要遵循的设计趋势”文章。 我们还在 2022 年要关注的热门网页设计趋势中发表了一篇文章。对此类文章的关注是可以理解的——设计本身就是客户和访问者都能看到的。 然而，它背后的代码与大多数用户无关。

前端代码

但是，虽然这似乎无关紧要，但它当然非常重要。 干净的代码、优化的方法和新技术使开发人员能够以可扩展的方式呈现精美的设计。 性能是用户想要的，可扩展性是客户想要的。

所以，为了给所有前端开发者一些应有的尊重，也为了给设计师一些见解和想法，我们整理了这份“2022年前端趋势”清单。

1. CSS 自定义属性

这是开发人员多年来一直想要的东西，尽管 CSS 自定义属性（或也称为 CSS 变量）已经存在了一段时间。 例如，W3C Module Level 1 是从 2015 年开始的。但与任何新技术一样，它需要一段时间才能获得关注。 我们相信，在 2021 年，我们将看到一些自成立以来最大的采用率。

为什么它很酷？

自定义属性实际上是 CSS 中的变量。 你可能会说“但是我们在 Sass 中有变量，不是吗？” 是的，我们做到了！ 但是当你将 Sass 编译为 CSS 时，你会得到 CSS。 而且没有变数。 您不能再更改该变量的值。 $primary: red就是红色。

可变字体

但是，对于自定义属性，您有--primary: red 。 然后您可以将--primary重新定义为蓝色。 直接在浏览器中，无需编译。 要了解更多关于这些 CSS 技巧的信息，请查看这篇文章：CSS 变量和预处理器变量有什么区别？

使用它们的一个巧妙技巧是自定义主题。 您可以通过变量定义 HSL 值，然后允许用户通过前端的滑块更改色调。 使用“设置您的配色方案”功能，使用 JS 和 BAM 将滑块值连接到 CSS 变量。

2.可变字体

可变字体，就像 CSS 自定义属性一样，已经存在了一段时间，但仍然没有被广泛使用。 一个原因是它们需要变得更受欢迎的时间、教程/指南和技术的数量以便开发人员采用以及字体本身需要。 您不能只选择任何字体并对其应用更改。

您可以用来浏览和试验的首选网站之一是可变字体。 如果您第一次听到这个术语，它也可以作为一个很好的演示。 可变字体允许您使用单个文件并应用"font-weight"或"font-style"等属性，并完全控制粗细或倾斜量……

敏捷的棕色狐狸

资源

为什么它很酷？

嗯，很明显，它为我们开发人员（和设计师）提供了几乎无限的字体外观自由度。 你有没有想过"font-weight: bold"有点过分，而“normal”又太瘦了，中间什么都没有？

字体设计者非常清楚这一点，并且经常提供中间属性。 他们用 100（轻）或 900（非常厚）之类的数字以及介于 300、400、600、700 等之间的任何数字标记它们。但也许您需要 750 并且它不可用？ 现在，使用可变字体，您可以！

可变字体还有另一个巨大的好处。 您可能很清楚，字体是加载时间的主要贡献者。 无论是在带宽方面还是在屏幕上的渲染方面。 一个相当标准的请求可能如下所示：

  • headings-font-normal.woff2
  • headings-font-bold.woff2
  • body-normal.woff2
  • body-italic.woff2
  • body-bold.woff2

凭借所有这些优点，您可以轻松超过 500kb。 使用可变字体，您只需要一种字体即可获得所有其他变体。 一请求。

您可以进一步阅读可变字体：网络上可变字体简介。

3.更多的JavaScript！

这是一个“令人眼花缭乱”的标题，但这是真的！ 前端开发者不仅是“JS 开发者”，也只是“CSS/HTML”开发者。 这个标题是给他们的。

更多 JavaScript

JavaScript 不仅仅是一种趋势，尽管取决于你问谁，可能会出现一些非常激烈的对话，比如“是的，现在，如果你没有启用 JS，你甚至无法打开网站”或“感谢为您的“关于”页面加载 5MB 滑块和广告”。

但无论它有多少积极和消极的一面，它的用途都会增加。 那么，哪些基于 JS 的技术/方法/工具应该更流行？

  • React/Vue 作为 WordPress（无头）等 CMS 的前端。
  • WebGL (Three.js) 3D 图形、模拟和交互性。
  • 虚拟现实和增强现实内容。
  • 更优化的构建工作流程（webpack、gulp）。
  • 用于更多控制/功能的浏览器 API。

并且添加另一个深入研究它的重要理由 - 仅使用 JS，您可以在技术上构建您想要的几乎任何大小的项目。 仅使用 JS，您就可以做一个响应式前端，将其连接到一些数据存储，利用浏览器的 API 以获得最佳用户体验，并实时部署您的项目。 对设置的任何调整都可以在设置中轻松完成。

4. 基于实用程序的样式

基于实用程序的样式侧重于通过预定义的类应用样式。 这就是网页样式的一般含义。 但是，这里与标准方法有点不同。 看，你不会用阴影、背景等来设置.card的样式。你可以用.shadow和.bg-light和.br-5来设置 HTML 元素的样式（比如边框半径）。

对于只需要快速输出一些东西并且不担心 CSS 的 JS 开发人员来说，这种方法效果非常好。

这一点都不新鲜，但 Tailwind 的流行让开发人员重新考虑了这种方法。

尾风css

资源

有些人可能会争辩说，这几乎是“在 HTML 中编写 CSS”，您无法真正从 CSS 更改组件并使其随处更新。 从技术上讲，这是对的，但是当你的组件是 React/Vue 应用程序中的 JS 文件时，你需要在一个地方更新它们。

也许其中一个缺点是您需要学习另一个框架。 它不仅仅是 CSS，您必须记住属性，因为某些元素可能看起来像这样：

class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl"

尽管总会有人喜欢它（也讨厌它），但它是解决许多问题的好方法。 此外，在您真正尝试之前，您永远不会知道它是否适合您。

5. 新的 CSS 功能

使用新的 CSS 特性本身就是一种前端技术趋势。 虽然这不是对特定功能或方法的改变，但它挑战了我们迄今为止的编码方式。 优点？ 它解决了很多问题。 坏的？ 向后兼容性。

但是由于过去一两年浏览器供应商的进步（看看你，微软），全球大多数用户可以比以往任何时候都更有效地访问网络。

CSS阴影部分

资源

CSS 自定义属性是这些特性之一，但它已有 6 年的历史（而且相当重要），它有自己的部分。

写作模式

写作模式

虽然不经常使用，但由于许多开发人员很少需要支持从右到左的语言，因此确实存在编写模式。 它们是仪表板/框架和多语言网站的必需品。 由于增加了对诸如margin-inline-start 等定向写入属性的支持，您不必为RTL 覆盖margin-left 到margin-right。

CSS 子网格

我们有弹性，然后我们有网格。 现在，我们在grids 中有网格。 子网格是开发人员在首次支持 Grid 时期望开箱即用的东西。 好吧，现在我们有了它，它听起来既酷又有用。 荣誉奖：Flexbox 间隙（因为它也是网格的一部分）。 它做它所说的。

:is

一个简写选择器，最好用我们从 MDN 获取的代码片段来解释：

 /* 选择标题内的任何段落，主要
或悬停的页脚元素 */
:is(页眉、主页、页脚) p:hover {
红色;
光标：指针；
}
 /* 上面等价于下面 */
标题 p：悬停，
主 p:hover,
页脚 p:hover {
红色;
光标：指针；
}

包起来

多年来，前端趋势发生了很多变化，并且改进将继续进行。 如果您想要一个能够为您提供所需转换和收入的网站，那么您应该立即开始进行前端编码。 您的客户应该能够轻松使用您的网页，以便鼓励他们与您的业务互动。

尝试实施我们上面提到的前端趋势，让我们知道它如何帮助您的业务增长。