2021年将遵循的5种前端趋势

已发表: 2020-12-17

网上有大量“遵循的设计趋势”文章。 我们还在2021年将遵循的“热门Web设计趋势”中进行了介绍。关注此类文章非常容易理解-设计本身就是客户和访客所看到的。 但是，其背后的代码与大多数用户无关。

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

因此，为了对所有前端开发人员给予应有的尊重以及对设计师的一些见解和想法，我们编制了此列表“ 2021年要遵循的前端趋势”。

1. CSS自定义属性

即使CSS自定义属性（也称为CSS变量）已经存在了一段时间，这也是开发人员多年来一直想要的东西。 例如，W3C Module Level 1是从2015年开始的。但是，与任何新技术一样，要花些时间才能吸引人。 而且我们相信，自2021年成立以来，采用率将是最高的。

为什么酷？

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

自定义属性支持

自定义属性在Internet Explorer之外的所有地方都得到很好的支持

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

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

2.可变字体

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

您可以用来浏览和试验的网站之一是“可变字体”。 如果您是第一次听这个词，它也可以作为一个很好的演示。 可变字体使您可以使用单个文件并应用"font-weight"或"font-style"类的属性，从而完全控制粗细或斜度……

可变字体-gif

来源：网络上可变字体简介

为什么酷？

好吧，很明显，它为我们，开发人员（和设计师）提供了字体外观几乎无限的自由。 您是否曾经想到过"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不仅是一种趋势，尽管取决于您问的是谁，但可能会出现一些非常激烈的对话，并带有诸如“是的提示，如今，如果您未启用JS，您甚至无法打开网站”或“为“关于”页面加载5MB的滑块和广告”。

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

  • React / Vue作为WordPress之类的CMS的前沿（无头）
  • WebGL（Three.js）3D图形，模拟，交互性
  • VR和AR内容
  • 更优化的构建工作流程（Webpack，gulp）
  • 浏览器API提供更多控制/功能

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

4.基于实用程序的样式

基于实用程序的样式专注于通过预定义的类应用样式。 那就是网页样式的一般含义。 但是，这与标准方法有些不同。 瞧，您没有为带有阴影，背景等的.card设置样式。您为带有.shadow和.bg-light以及.br-5 （例如border-radius）的HTML元素设置样式。

对于只需要快速输出某些内容而又不用担心CSS的JS开发人员来说，这种方法效果非常好。

这根本不是什么新鲜事，但是Tailwind的流行使开发人员重新考虑了这种方法。

尾风主页

尾风主页

有人可能会说这几乎是“用HTML编写CSS”，在这里您不能真正从CSS更改组件并在各处进行更新。 从技术上讲，这是事实，但是当你的组件在JS文件作出反应/ Vue公司的应用程序，例如，那么你就在一个地方进行更新。

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

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

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

5. CSS新功能

使用新的CSS功能本身可能是一种趋势。 尽管这不是对特定功能或方法的更改，但它对我们到目前为止的编码方式提出了挑战。 优点？ 它解决了很多问题。 不好吗向后兼容。

但是，由于浏览器供应商在过去的一两年中（在您看来，微软）取得了进步，因此世界上的大多数用户都可以比以往更有效地访问网络。

ccs阴影部分

CSS Shadow Parts作为另一个即将推出的功能

CSS自定义属性是这些功能之一，但已有大约5年的历史（并且相当重要），它具有自己的部分。

写作模式

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

CSS子网格

我们有了柔韧性，然后有了网格。 现在，我们在grids内部有网格。 最初支持Grid时，开发人员可以立即使用Subgrids。 好吧，现在我们有了它，它听起来听起来既酷又有用。 荣誉提名：Flexbox的差距（因为它也是网格的一部分）。 它按照它说的去做。 可悲的是，它还没有得到很好的支持。

:is

速记选择器，最好从我们从MDN提取的代码段中进行最佳解释：

 / *选择标题内部的任何段落
或正在悬停的页脚元素* /
：is（页眉，主要，页脚）p：悬停{
红色;
光标：指针；
}
 / *以上等同于以下* /
标头p：悬停，
主要提示：悬停，
页脚p：hover {
红色;
光标：指针；
}