5 tendências front-end a seguir em 2021

Publicados: 2020-12-17

Há uma tonelada de artigos sobre “tendências de design a seguir” circulando pela web. Também analisamos um deles em Hot Web Design Trends to Follow in 2021. O foco nesses artigos é muito compreensível - o design em si é o que o cliente e o visitante veem. O código por trás dele, entretanto, é irrelevante para a maioria dos usuários.

Mas embora pareça irrelevante, é claro, é muito importante. Código limpo, abordagens otimizadas e novas técnicas são o que permitem aos desenvolvedores apresentar belos designs de uma forma que pode ser escalonada. Desempenho é o que os usuários desejam, escalabilidade é o que o cliente deseja.

Portanto, para dar o devido respeito a todos os desenvolvedores de front-end, bem como alguns insights e ideias para designers, compilamos esta lista de “Tendências de Front-End a Seguir em 2021”.

1. Propriedades personalizadas CSS

Isso é algo que os desenvolvedores desejam há anos, embora as propriedades CSS Custom (ou também conhecidas como CSS Variables) já existam há algum tempo. Por exemplo, o Módulo W3C Nível 1 é de 2015. Mas, como acontece com qualquer nova tecnologia, leva um tempo para obter tração. E acreditamos que, em 2021, veremos algumas das maiores taxas de adoção desde seu início.

Por que isso é legal?

Propriedades personalizadas são, na verdade, variáveis em CSS. Você pode dizer “Mas temos variáveis no Sass, não temos?” Sim nós fazemos! Mas quando você compila o Sass para CSS, obtém, bem, CSS. E não há variáveis. Você não pode mais alterar o valor dessa variável. $primary: red é apenas vermelho.

Propriedades personalizadas são bem suportadas em qualquer lugar, exceto para o Internet Explorer

No entanto, com propriedades personalizadas, você tem --primary: red . E então você pode redefinir --primary para azul, por exemplo. Diretamente no navegador, nenhuma compilação necessária. Para saber mais sobre esses truques de CSS Qual é a diferença entre variáveis CSS e variáveis de pré-processador?

Um truque interessante para usá-los é para temas personalizados. Você pode definir valores HSL por meio de variáveis e, em seguida, permitir que os usuários alterem o matiz por meio de um controle deslizante no frontend. Conecte o valor do controle deslizante à variável CSS com JS e BAM com a funcionalidade “Definir seu esquema de cores”.

2. Fontes variáveis

Fontes variáveis, assim como as propriedades personalizadas do CSS, já existem há algum tempo, mas ainda não são amplamente utilizadas. Um dos motivos seria o tempo que eles precisam para se tornarem mais populares, o número de tutoriais / guias e técnicas para serem adotados pelos desenvolvedores, bem como as próprias fontes necessárias. Você não pode simplesmente escolher qualquer fonte e aplicar alterações a ela.

Um dos sites que você pode usar para navegar e experimentar é Fontes variáveis. Também serve como uma boa demonstração, caso você esteja ouvindo este termo pela primeira vez. Fontes variáveis permitem que você use um único arquivo e aplique propriedades como "font-weight" espessura da "font-weight" ou "font-style" com controle completo sobre a quantidade de espessura ou inclinação ...

Fonte: Introdução às fontes variáveis na web

Por que isso é legal?

Bem, está claro que isso dá a nós, os desenvolvedores (e designers), liberdade quase infinita para a aparência de uma fonte. Você já pensou que "font-weight: bold" é um pouco demais, mas "normal" é muito fino e você não tem nada no meio?

Os designers de fontes estão muito cientes disso e geralmente fornecem propriedades intermediárias. Eles os rotulam com números como 100 (claro) ou 900 (muito espesso) e algo entre 300, 400, 600, 700, etc. Mas talvez você precise de 750 E não está disponível? Agora, com fontes variáveis, você faz!

Há outro grande benefício para fontes variáveis. Como você provavelmente sabe, as fontes contribuem muito para o tempo de carregamento . Tanto em termos de largura de banda quanto de renderização na tela. Uma solicitação bastante padrão pode ter a seguinte aparência:

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

Com toda essa bondade, você pode facilmente passar de 500kb. Com uma fonte variável, você só precisa de uma fonte e receberá todas as outras variações. Um pedido.

Você pode ler mais em Fontes variáveis: introdução às fontes variáveis na web.

3. Mais JavaScript!

Este é um título de “revirar os olhos”, mas é verdade! Os desenvolvedores de front-end não são apenas “desenvolvedores JS”, mas também apenas desenvolvedores “CSS / HTML”. E este título é para eles.

JavaScript não é apenas uma tendência, embora dependendo de para quem você pergunte, algumas conversas muito acaloradas podem ocorrer com comentários como “Sim, e hoje em dia, você nem consegue abrir um site se não tiver JS habilitado” ou “hanks for carregando controles deslizantes de 5 MB e anúncios para sua página Sobre ”.

Mas não importa quantos lados positivos e negativos ele tenha, seu uso cresce. Então, qual tecnologia / abordagem / ferramentas baseada em JS deveria ser mais tendência?

React / Vue como uma fachada para CMSs como WordPress (headless)
WebGL (Three.js) Gráficos 3D, simulações, interatividade
Conteúdo VR e AR
Fluxos de trabalho de compilação mais otimizados (webpack, gulp)
APIs do navegador para mais controle / funcionalidade

E para adicionar outro grande motivo para mergulhar mais fundo nisso - com apenas JS, você pode construir tecnicamente quase qualquer tamanho de projeto que desejar. Com apenas JS, você pode fazer um front-end reativo, conectá-lo a algum armazenamento de dados, utilizar as APIs do navegador para a melhor experiência do usuário e implantar seu projeto ao vivo. Quaisquer ajustes nas configurações podem ser feitos facilmente na configuração.

4. Estilo baseado em utilitário

O estilo baseado em utilitários se concentra na aplicação de estilos por meio de classes predefinidas. Isso é o que geralmente significa estilizar uma página da web. No entanto, aqui é um pouco diferente da abordagem padrão. Veja, você não estiliza um .card com sombra, fundo, etc. Você estiliza um elemento HTML com .shadow e .bg-light e .br-5 (como border-radius).

É uma abordagem que funciona incrivelmente bem para desenvolvedores JS que precisam apenas produzir algo rapidamente e não estão preocupados com CSS.

Isso não é novidade, mas a popularidade do Tailwind fez os desenvolvedores reconsiderarem a abordagem.

Página inicial do Tailwind

Alguns podem argumentar que é basicamente “escrever CSS em HTML”, onde você não pode realmente alterar um componente do CSS e atualizá-lo em todos os lugares. Tecnicamente, isso é verdade, mas quando os seus componentes são arquivos JS em um Reagir / Vue aplicativo por exemplo, então você atualizá-los em um só lugar.

Talvez uma das desvantagens seja que você precisa aprender outra estrutura. Não é apenas CSS, você tem que memorizar as propriedades, pois alguns elementos podem ser assim:

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

Embora sempre haja pessoas que amam (e odeiam), é uma ótima solução para muitos problemas. Além disso, você nunca saberá se funciona para você até que você realmente tente.

5. Novos recursos CSS

Usar novos recursos de CSS pode ser uma tendência por si só. Embora não seja uma mudança em um recurso ou abordagem específica, isso desafia a maneira como temos codificado até agora. Os prós? Isso resolve muitos problemas. O mal? Compatibilidade com versões anteriores.

Mas, graças ao progresso dos fornecedores de navegadores nos últimos dois anos (olhando para você, Microsoft), a maioria dos usuários ao redor do mundo pode acessar a web com mais eficiência do que nunca.

CSS Shadow Parts como outro recurso futuro

As propriedades CSS Customizadas são um desses recursos, mas por ter cerca de 5 anos (e bastante importantes), ela tem sua própria seção.

Modos de Escrita

Embora não seja usado com muita frequência, já que muitos desenvolvedores raramente precisam oferecer suporte aos idiomas da direita para a esquerda, existem modos de escrita. Eles são essenciais para painéis / estruturas e sites multilíngues. Graças ao maior suporte de propriedades de gravação direcional como margin-inline-start por exemplo, você não precisa sobrescrever margem esquerda para margem direita para RTL.

CSS Subgrid

Tínhamos flex, depois grades. Agora, temos grades dentro de grades . Subgrids é algo que os desenvolvedores esperavam estar disponível fora da caixa quando o Grid foi suportado pela primeira vez. Bem, agora o temos e é tão legal e útil quanto parece. Menção honrosa: Fendas do Flexbox (pois também faz parte das grades). Ele faz o que diz. Infelizmente, ainda não tem um bom suporte.

`:is`

Um seletor abreviado que é melhor explicado com um snippet de código que tiramos do MDN:

 / * Seleciona qualquer parágrafo dentro de um cabeçalho, principal
ou elemento de rodapé que está sendo passado * /
: is (cabeçalho, principal, rodapé) p: hover {
cor vermelha;
cursor: ponteiro;
}

 / * O acima é equivalente ao seguinte * /
cabeçalho p: pairar,
p principal: pairar,
rodapé p: hover {
cor vermelha;
cursor: ponteiro;
}