5 фронтенд-трендов, которым стоит следовать в 2022 году

В Интернете есть масса статей «Тенденции дизайна, которым стоит следовать». Мы также рассказали об одном из них в «Горячих тенденциях веб-дизайна, которым стоит следовать в 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 с помощью переменных, а затем разрешить пользователям изменять оттенок с помощью ползунка во внешнем интерфейсе. Подключите значение ползунка к переменной CSS с помощью JS и BAM с функцией «Установите свою цветовую схему».

2. Вариативные шрифты

Переменные шрифты, как и пользовательские свойства CSS, существуют уже некоторое время, но до сих пор не получили широкого распространения. Одной из причин может быть время, необходимое для того, чтобы они стали более популярными, количество учебных пособий/руководств и методов, которые должны быть приняты разработчиками, а также сами необходимые шрифты. Вы не можете просто выбрать любой шрифт и применить к нему изменения.

Один из популярных веб-сайтов, который вы можете использовать для просмотра и экспериментов, — это Variable Fonts. Он также служит хорошей демонстрацией, если вы впервые слышите этот термин. Переменные шрифты позволяют вам использовать один файл и применять такие свойства, как "font-weight" или "font-style" с полным контролем над толщиной или наклоном…

Источник

Почему это круто?

Что ж, ясно, что это дает нам, разработчикам (и дизайнерам), почти бесконечную свободу в том, как выглядит шрифт. Вы когда "font-weight: bold" — это слишком много, а «нормальный» — слишком тонкий, и у вас нет ничего промежуточного?

Дизайнеры шрифтов прекрасно это понимают и часто предоставляют средние свойства. Они обозначают их цифрами вроде 100 (легкие) или 900 (очень толстые) и что-то среднее между ними, например, 300, 400, 600, 700 и т. д. Но, может быть, вам нужно 750, а его нет в наличии? Теперь, с вариативными шрифтами, вы можете это сделать!

Есть еще одно огромное преимущество вариативных шрифтов. Как вы, наверное, хорошо знаете, шрифты сильно влияют на время загрузки . Как с точки зрения пропускной способности, так и с точки зрения рендеринга на экране. Довольно стандартный запрос может выглядеть так:

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

Со всем этим добром вы можете легко преодолеть 500 КБ. С переменным шрифтом вам нужен только один шрифт, и вы получаете все остальные варианты. Один запрос.

Вы можете дополнительно прочитать о переменных шрифтах: введение в переменные шрифты в Интернете.

3. Больше JavaScript!

Это «глаза закатывает глаза», но это правда! Front-End разработчики — это не только «разработчики JS», но и просто разработчики «CSS/HTML». И эта рубрика для них.

JavaScript — это не просто тенденция, хотя, в зависимости от того, кого вы спросите, могут возникнуть очень горячие разговоры с комментариями вроде «Да, а сейчас вы даже не можете открыть веб-сайт, если у вас не включен JS» или «Спасибо за загрузка слайдеров и рекламы размером 5 МБ для вашей страницы «О нас».

Но сколько бы положительных и отрицательных сторон он ни имел, его польза растет. Итак, какие технологии/подходы/инструменты на основе JS должны быть в тренде?

• React/Vue в качестве прикрытия для CMS, такой как WordPress (безголовый).
• WebGL (Three.js) 3D-графика, симуляции и интерактивность.
• VR и AR контент.
• Более оптимизированные рабочие процессы сборки (webpack, gulp).
• API-интерфейсы браузера для большего контроля/функциональности.

И чтобы добавить еще одну вескую причину, чтобы углубиться в это — только с JS вы можете технически построить проект практически любого размера, который вы хотите. Используя только JS, вы можете создать реактивный интерфейс, подключить его к некоторому хранилищу данных, использовать API-интерфейсы браузера для наилучшего взаимодействия с пользователем и развернуть свой проект в реальном времени. Любые корректировки настроек можно легко сделать в настройках.

4. Утилита на основе стилей

Стилизация на основе утилит фокусируется на применении стилей через предопределенные классы. Вот что обычно означает стилизация веб-страницы. Однако здесь это немного отличается от стандартного подхода. Видите ли, вы не .card с тенью, фоном и т. д. Вы стилизуете элемент HTML с помощью .shadow и .bg-light и .br-5 (например, border-radius).

Это подход, который удивительно хорошо работает для разработчиков JS, которым просто нужно быстро что-то выводить и не беспокоиться о CSS.

В этом нет ничего нового, но популярность Tailwind заставила разработчиков пересмотреть подход.

Источник

Некоторые могут возразить, что это в значительной степени «написание CSS в HTML», где вы не можете изменить компонент из CSS и обновить его везде. Технически это верно, но когда ваши компоненты представляют собой JS-файлы, например, в приложении React/Vue, вы ДЕЙСТВИТЕЛЬНО обновляете их в одном месте.

Возможно, одним из недостатков является то, что вам нужно изучить другой фреймворк. Это не просто CSS, вам нужно запомнить свойства, так как некоторые элементы могут выглядеть так:

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

Хотя всегда найдутся люди, которые его любят (и ненавидят), это отличное решение многих проблем. Кроме того, вы никогда не узнаете, работает ли это для вас, пока не попробуете.

5. Новые функции CSS

Использование новых функций CSS само по себе может быть технологической тенденцией. Хотя это не изменение конкретной функции или подхода, оно бросает вызов тому, как мы кодировали до сих пор. Плюсы? Он решает множество проблем. Плохо? Обратная совместимость.

Но благодаря прогрессу поставщиков браузеров за последние год или два (смотрю на вас, Microsoft) большинство пользователей во всем мире могут выходить в Интернет более эффективно, чем когда-либо прежде.

Источник

Пользовательские свойства CSS — одна из этих функций, но, поскольку ей около 6 лет (и она довольно важная), у нее есть собственный раздел.

Режимы записи

Хотя они используются не слишком часто, поскольку многим разработчикам редко требуется поддержка языков с письмом справа налево, режимы письма все же существуют. Они необходимы для информационных панелей/фреймворков и многоязычных сайтов. Благодаря расширенной поддержке свойств направленного письма, таких как, например, margin-inline-start, вам не нужно перезаписывать margin-left на margin-right для RTL.

Подсетка CSS

У нас была гибкость, затем у нас были сетки. Теперь у нас есть сетки внутри grids . Подсетки — это то, что разработчики ожидали получить из коробки, когда Grid впервые поддерживали. Что ж, теперь он у нас есть, и он такой же крутой и полезный, как и звучит. Почетное упоминание: промежутки Flexbox (поскольку это тоже часть сетки). Он делает то, что говорит.

:is

Сокращенный селектор, который лучше всего объясняется фрагментом кода , который мы взяли из MDN:

 /* Выбирает любой абзац внутри заголовка, основной
или элемент нижнего колонтитула, на который наведен курсор мыши */
:is(верхний, основной, нижний колонтитулы) p:hover {
красный цвет;
курсор: указатель;
}

 /* Вышеприведенное эквивалентно следующему */
заголовок p: наведите курсор,
главное п: наведение,
нижний колонтитул p: hover {
красный цвет;
курсор: указатель;
}

Подведение итогов

Многое изменилось с тенденциями внешнего интерфейса за эти годы, и улучшения будут продолжаться. Если вам нужен веб-сайт, который будет приносить желаемую конверсию и доход, то вам следует начать работать над интерфейсным кодированием как можно скорее. Ваши клиенты должны иметь возможность легко использовать вашу веб-страницу, чтобы им было интересно взаимодействовать с вашим бизнесом.

Попробуйте внедрить тенденции внешнего интерфейса, о которых мы упоминали выше, и сообщите нам, как это помогло вашему бизнесу расти.