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

网上有大量“遵循的设计趋势”文章。 我们还在2021年将遵循的热门Web设计趋势中提出了自己的想法。 对此类文章的关注是可以理解的-设计本身就是客户和访客所看到的。 但是，其背后的代码与大多数用户无关。

但是，尽管这似乎无关紧要， 当然， 这很重要。 干净的代码， 优化的方法 新技术是什么 允许 开发人员以可扩展的方式展示精美的设计。 表现 是用户想要的 可扩展性 是客户想要的。

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

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

为什么酷？

自定义属性实际上是 变数 在CSS中。 您可能会说：“但是我们在Sass中有变量， 不是吗“ 是的， 我们的确是！ 但是当您将Sass编译为CSS时， 你得到， 出色地， CSS。 而且没有变量。 您不能再更改该变量的值。 只是红色。

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

然而， 具有自定义属性， 你有 。 然后，您可以重新定义为蓝色。 直接在浏览器中 无需编译。 要了解有关这些CSS技巧的更多信息，CSS变量和预处理器变量之间有什么区别？

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

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

可以用来浏览和试验的网站之一是“可变字体”。 如果您是第一次听这个词，它也可以作为一个很好的演示。 可变字体允许您使用 一个 文件 并应用诸如或的属性 完全控制 超过厚度或倾斜度…

资料来源：网络上可变字体的介绍

为什么酷？

出色地， 很明显，它给了我们， 开发人员（和设计师）， 几乎无限的自由 字体的外观。 你有没有想过太多 但是“普通”太瘦了，您之间没有任何东西吗？

字体设计者对此非常了解，并经常提供中间属性。 他们用数字（例如100（浅）或900（非常粗））以及介于300和300之间的任何数字来标记它们， 400， 600， 700， 等等。 但是也许您需要750，但它不可用？ 现在， 使用可变字体， 你做！

可变字体还有另一个巨大的好处。 如您所知， 字体对 加载时间。 无论是在带宽还是在屏幕上呈现。 一个比较标准的请求可能看起来像这样：

有这么多善良 您可以轻松超过500kb。 使用可变字体， 您只需要一种字体，就会收到所有其他变体。 一个请求。

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

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

JavaScript不仅是一种趋势， 尽管取决于您问的是谁， 诸如“是的， 如今， 如果您未启用JS，您甚至都无法打开网站”或“关于为“关于”页面加载5MB滑块和广告的提示”。

但是不管它有多少积极和消极的一面， 它的用途不断增长。 所以， 哪些基于JS的技术/方法/工具应该更趋向于发展？

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

并添加另一个深层次的理由-仅使用JS， 从技术上讲，您几乎可以构建所需的任何规模的项目。 仅用JS， 你可以做一个反应性的前端， 将其连接到某些数据存储， 利用浏览器的API获得最佳的用户体验， 并实时部署您的项目。 对设置的任何调整都可以在设置中轻松完成。

基于实用程序的样式专注于通过预定义的类应用样式。 那就是网页样式的一般含义。 然而， 这与标准方法有些不同。 看， 你不会用阴影来造型 背景， 等等。 您可以使用和和（例如border-radius）来设置HTML元素的样式。

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

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

尾风主页

有人可能会说这几乎是“用HTML编写CSS”，在这种情况下，您实际上无法从CSS更改组件并在各处进行更新。 从技术上讲 那是真实的， 但是，例如，当您的组件是React / Vue应用程序中的JS文件时， 然后你 做 在一处更新它们。

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

尽管总会有人喜欢它（讨厌它）， 这是解决许多问题的好方法。 还， 您将永远不知道它是否对您有用，直到您真正 试试吧。

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

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

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

CSS自定义属性是这些功能之一， 但是大约有5年历史（而且相当专业），它有自己的版块。

虽然不经常使用， 由于许多开发人员很少需要支持从右到左的语言， 写作模式确实存在。 对于仪表板/框架和多语言站点，它们是必不可少的。 得益于对定向写入属性（例如margin-inline-start）的更多支持， 您不必为RTL覆盖从margin-left到margin-right的内容。

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

速记选择器，最好用代码片段进行解释 我们从MDN取得的数据：

：is（header， 主要的， footer) p:hover {
红色;
光标：指针；
}

标头p：悬停，
主要提示：悬停，
footer p:hover {
红色;
光标：指针；
}

DevriX专业人员随时可以与您合作。 我们负责服务器管理， 自动化， 登台服务器设置， 优化， 可扩展性 链式部署等等。

DevriX的创意主管和前端开发人员
亚历克斯（Alex）的热情在于学习新的网络技术， 探索创新的方法来优化网站性能并改善用户体验。 亚历克斯（Alex）喜欢骑自行车和数字艺术，最近开始在ELSYS技术学校教授设计。