5 Front-End Trends to Follow in 2022

There are a ton of “Design trends to follow” articles floating around the web. We also put our spin on one in Hot Web Design Trends to Follow in 2022. The focus on such articles is very understandable – the design itself is what both a client and a visitor see. The code behind it, however, is mostly irrelevant to most users.

But while it seems irrelevant, of course, it’s very important. Clean code, optimized approaches, and new techniques are what allow developers to present beautiful designs in a way that can scale. Performance is what users want, scalability is what the client wants.

So, in order to give some due respect to all the front-end developers as well as some insights and ideas to designers, we’ve compiled this list of “Front-End Trends to Follow in 2022”.

1. CSS Custom Properties

This is something developers have wanted for years even though CSS Custom properties (or also known as CSS Variables) have been around for a while s now. For instance, W3C Module Level 1 is from 2015. But as with any new technology, it takes a while to get traction. And we believe that in 2021, we will see some of the largest adoption rates since its inception.

Why Is It Cool?

Custom properties are, in fact, variables in CSS. You might say “But we have variables in Sass, don’t we?” Yes, we do! But when you compile Sass to CSS, you get, well, CSS. And there are no variables. You can no longer change the value of that variable. $primary: red is just red.

However, with custom properties, you have --primary: red. And then you can redefine --primary to blue for example. Directly in the browser, no compiling is needed. To know more about these CSS tricks, check out this article: What is the difference between CSS variables and preprocessor variables?

One neat hack to use them is for custom theming. You can define HSL values via variables and then allow the users to change the hue through a slider on the frontend. Connect the slider value to the CSS variable with JS and BAM with the “Set your color scheme” functionality.

2. Variable Fonts

Variable fonts, just like CSS Custom Properties have been around for a while, but are still not widely used. One reason would be the time they need to become more popular, the number of tutorials/guides and techniques in order to be adopted by developers as well as the fonts themselves needed. You can’t just pick any font and apply changes to it.

One of the go-to websites you can use to browse and experiment is Variable Fonts. It also serves as a good demo in case you are hearing this term for the first time. Variable fonts allow you to use a single file and apply properties like "font-weight" or "font-style" with complete control over the amount of thickness or slant…

Why Is It Cool?

Well, it’s clear that it gives us, the developers (and designers), nearly infinite freedom to the way a font looks. Have you ever thought that "font-weight: bold" is a bit too much, but “normal” is too thin and you don’t have anything in between?

Font-designers are very well aware of that and often provide middle properties. They label them with numbers like 100 (light) or 900 (very thick) and anything in between like 300, 400, 600, 700, etc. But maybe you need 750 And it’s not available? Now, with variable fonts, you do!

There is another huge benefit to variable fonts. As you probably are well aware, fonts are large contributors to load times. Both in terms of bandwidth and the rendering on screen. A rather standard request might look like this:

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

With all that goodness, you can easily go past 500kb. With a variable font, you just need one font and you receive all other variations. One request.

You can further read up on Variable Fonts: Introduction to variable fonts on the web.

3. More JavaScript!

This is an “eye-rolling” title, but it’s true! Front-End developers are not only “JS Developers”, but also just “CSS/HTML” developers too. And this heading is for them.

JavaScript is not just a trend, although depending on who you ask, some very heated conversations might occur with comments like “Yeah, and nowadays, you can’t even open a website if you don’t have JS enabled” or “hanks for loading 5MB sliders and ads for your About page”.

But no matter how many positive and negative sides it has, its use grows. So, what JS-based tech/approach/tooling should trend more?

• React/Vue as a front to CMS like WordPress (headless).
• WebGL (Three.js) 3D graphics, simulations and interactivity.
• VR and AR content.
• More optimized build workflows (webpack, gulp).
• Browser APIs for more control/functionality.

And to add another great reason to dive deeper into it – with only JS, you can technically build almost any size project you want. With just JS, you can do a reactive frontend, connect it to some data storage, utilize the browser’s APIs for the best user experience, and deploy your project live. Any adjustments to the settings can be done easily in the setup.

4. Utility-Based Styling

Utility-based styling focuses on applying styles through predefined classes. That is what styling a webpage generally means. However, here it’s a bit different than the standard approach. See, you don’t style a .card with shadow, background, etc. You style an HTML element with .shadow and .bg-light and .br-5 (like border-radius).

It is an approach that works amazingly well for JS developers that just need to output something quickly and aren’t worried about the CSS.

This is not new at all, but the popularity of Tailwind has made developers reconsider the approach.

Some could argue that it’s pretty much “writing CSS in HTML” where you can’t really change a component from CSS and have it updated everywhere. Technically, that is true, but when your components are JS files in a React/Vue app for example, then you DO update them in one place.

Maybe one of the downsides is that you need to learn another framework. It’s not like it’s just CSS, you do have to memorize the properties since some elements might look like this:

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

Although there will always be people who love it (and hate it), it’s a great solution to many problems. Also, you will never know if it works for you until you really try it.

5. New CSS Features

Using new CSS features can be a front-end technology trend in itself. While it’s not a change to a specific feature or approach, it challenges the way we’ve been coding so far. The pros? It solves lots of problems. The bad? Backward compatibility.

But thanks to the progress of browser vendors in the past year or two (looking at you, Microsoft), the majority of the users around the world can access the web more efficiently than ever before.

CSS Custom properties are one of these features, but being about 6 years old (and quite major), it has its own section.

Writing Modes

While not used too often, as many developers rarely need to support the right to left languages, writing modes do exist. They are a must for dashboards/frameworks and multilingual sites. Thanks to the increased support of directional writing properties like margin-inline-start for example, you don’t have to overwrite margin-left to margin-right for RTL.

CSS Subgrid

We had flex, then we had grids. Now, we have grids inside grids. Subgrids are something developers expected to be available out of the box when Grid was first supported. Well, now we have it and it is as cool and useful as it sounds. Honorable mention: Flexbox gaps (as it’s part of grids too). It does what it says. 

:is

A shorthand selector that is best explained with a code snippet that we took from MDN:

/* Selects any paragraph inside a header, main
or footer element that is being hovered */
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}

Wrapping Up

A lot has changed with front-end trends over the years, and the improvements will just keep on coming. If you want a website that will give you the conversions and revenue that you desire, then you should start working on your front-end coding as soon as now. Your customers should be able to use your webpage with ease so they’d be encouraged to interact with your business.

Try implementing the front-end trends that we have mentioned above and let us know how it has helped your business grow.