A importância da aleatoriedade nativa em CSS

Recentemente, publiquei uma história sobre as novas funções aleatórias que chegaram ao CSS e como elas funcionam. Neste artigo, exploraremos os desafios da aleatoriedade no CSS, como o conceito evoluiu ao longo do tempo e por que esse recurso nativo é importante.

Uma das primeiras coisas que quis fazer quando comecei a desenvolver sites foi criar experiências únicas que mudassem de pessoa para pessoa. Apenas pequenas coisas: um fundo aleatório aqui, cores aleatórias ali… Mesmo pequenas microinterações, como confetes ou neve caindo, precisavam de algum nível de aleatoriedade para parecerem naturais.

E eu não estava sozinho! Logo descobri que muitos desenvolvedores web (“webmasters”, na época) queriam fazer coisas assim: adicionar fatores surpreendentes e uma sensação de exclusividade a seus sites. Mas tivemos um problema: CSS.

CSS é uma linguagem declarativa e determinística. Duas características que vão de encontro à ideia de variação natural:

• Declarativo significa que ele se concentra no what , não no how . Em contraste com as linguagens imperativas, os desenvolvedores que usam CSS informam ao navegador qual é o resultado esperado, mas não como alcançá-lo.
• Determinístico significa que para uma determinada entrada obteremos a mesma saída. Sempre o mesmo. Se você especificar que uma cor será vermelha, essa cor será vermelha, e não azul ou amarela.

Isso ocorre intencionalmente e é uma das coisas que torna o CSS previsível e confiável. Se você entender como funciona o mecanismo de layout, poderá saber quais estilos serão aplicados em um determinado momento. O que é ótimo… mas não tão bom se você deseja gerar conteúdo aleatório.

E assim começou uma jornada desafiadora (e às vezes tortuosa) para designers e desenvolvedores alcançarem a variação natural de um sistema determinístico.

O longo e sinuoso caminho para estilos aleatórios

O caminho para estilos aleatórios em CSS é pavimentado com múltiplas tentativas e falhas. Mas a cada passo do caminho, os desenvolvedores encontraram novas soluções que melhoraram as anteriores. Mesmo que só um pouco.

Nota: Esta linha do tempo reflete o progresso lógico mais do que uma ordem histórica ou cronológica estrita.

Pseudo-aleatoriedade e padrões CSS

Podemos simular aleatoriedade em CSS criando padrões. Mas isso não é verdadeiramente aleatório. Os resultados serão sempre os mesmos e, mais cedo ou mais tarde, as pessoas perceberão o padrão.

Uma maneira de criar esta simulação é usando os seletores :nth-child() ou brincando com animações. O primeiro método é fácil, mas produz resultados abaixo da média; a segunda pode enganar e impressionar algumas pessoas.

Aviso: Reprodução automática de mídia

Escusado será dizer que esses métodos são hacks que não fornecem randomização em nenhum nível. Um ser humano pode não ser capaz de prever com precisão qual valor vem a seguir – pelo menos não sem algum esforço – mas uma máquina certamente pode.

Pré-processadores para o resgate

Passamos para a segunda melhor opção: ferramentas. Em particular, pré-processadores CSS como Sass, SCSS, Less e similares. Essas ferramentas incluem módulos matemáticos que fornecem funções aleatórias que podemos usar em tempo de compilação.

A frase-chave no parágrafo anterior é ” no momento da compilação. ” Sim, estamos gerando valores aleatórios para nossas propriedades CSS. Mas uma vez que esses valores são produzidos durante a compilação, eles ficam congelados para sempre (ou até a próxima compilação, para ser mais preciso). Assim como um mosquito preso no âmbar.

Os valores serão aleatórios quando o CSS for gerado, mas toda vez que os visitantes visitarem ou atualizarem a página, eles obterão os mesmos. Para produzir novos valores, precisaríamos recompilar as folhas de estilo.

Este foi um pequeno passo em direção à randomização de estilo, mas ainda havia um longo caminho a percorrer.

Aleatoriedade do lado do servidor

Passamos para a próxima melhor opção: usar outras linguagens para gerar valores aleatórios e passá-los para CSS por meio de HTML. Linguagens server-side como PHP, Java, ASP e outras foram perfeitas para essa tarefa na hora de gerar o HTML (ou mesmo o próprio CSS).

Essa abordagem funciona bem: obtemos novos valores aleatórios toda vez que a página é gerada, o que geralmente significa toda vez que ela é visitada ou atualizada. Também temos controle total sobre a randomização, pois podemos implementar nossas próprias funções.

Também tem deficiências. Se um novo conteúdo for adicionado dinamicamente à página, ele ficará preso aos valores “congelados” gerados durante o carregamento inicial da página. Melhor que padrões, melhor que pré-processadores… mas ainda não é perfeito.

Essa limitação se tornou um problema ainda maior com o aumento e a adoção generalizada de aplicativos de página única e arquiteturas JavaScript do lado do cliente.

E JavaScript… Finalmente!

Com a proliferação de aplicações web, fazia sentido migrar a aleatoriedade para JavaScript. A linguagem já é muito usada e adicionar algumas funções aleatórias à mistura não parece um grande exagero.

E o JavaScript finalmente resolveu! Pela primeira vez, os estilos poderiam realmente se comportar com variação natural: aleatórios na criação, na atualização e até mesmo na mutação.

Isso também pode ser feito de várias maneiras: usando frameworks, bibliotecas CSS-in-JS ou JavaScript simples. Os métodos para incorporar estilos por meio desta linguagem são vastos e bem suportados. Existem algumas preocupações de desempenho e complexidade, mas o JavaScript dá conta do recado.

Finalmente tivemos uma verdadeira randomização em estilos web… mas não no próprio CSS.

Um problema da Web e uma solução da Web

Essa última parte é importante. Temos randomização na web (JavaScript faz o trabalho), mas algo parece errado. Algo não parece certo. Basicamente, esse desconforto vem de duas coisas:

• Estamos aplicando uma solução imperativa a um problema declarativo.
• Estamos migrando as decisões de layout de CSS para JavaScript.

Uma solução imperativa para um problema declarativo

Mencionamos anteriormente que CSS é uma linguagem declarativa que se concentra em what , enquanto JavaScript é uma linguagem imperativa que se concentra em how .

Ao mover a randomização para JavaScript, estamos tentando responder a uma pergunta o que com uma resposta como . Funciona, mas não é o ideal.

Usando JavaScript, finalmente alcançamos aleatoriedade de estilo em todos os níveis: quando a página é criada, quando ela é atualizada e quando elementos são adicionados ou alterados (mutação). Mas ao fazer isso, estamos quebrando o modelo.

CSS cuida do layout e JavaScript cuida da lógica. Resolvemos uma limitação de CSS movendo as decisões de layout para JavaScript, criando uma incompatibilidade que produz aquela sensação sutil de “isso não está certo” – mesmo quando tudo funciona tecnicamente.

A solução CSS

A solução para essa incompatibilidade de modelo é simples: mova a randomização para CSS . Resolva um problema de layout diretamente na camada de layout, em vez de delegá-lo a uma ferramenta ou linguagem diferente. E isso aconteceu com a introdução de duas novas funções aleatórias como parte do Módulo CSS de Valores e Unidades Nível 5 :

• random(): gera um valor aleatório entre um mínimo e um máximo.
• random-item(): seleciona um valor aleatório de uma determinada lista.

Essa abordagem também se alinha com a Regra do Menor Poder , que sugere escolher a linguagem menos poderosa adequada para uma determinada finalidade. Na prática, isso significa resolver um problema utilizando a linguagem menos poderosa capaz de expressá-lo e resolvê-lo.

Normalmente, essa linguagem será mais adequada para a tarefa. As suas funcionalidades serão adaptadas ao nível em que são aplicadas, tornando-as mais simples, mais eficientes e com melhor desempenho. Embora uma linguagem mais poderosa certamente possa fazer o trabalho, ela geralmente introduz uma camada desnecessária de complexidade e abstração.

Na plataforma web, temos HTML para estrutura (menos poderoso), CSS para estilo e layout (mais poderoso) e JavaScript (significativamente mais poderoso). Ao implementar a randomização em CSS, movemos a solução para a camada apropriada e ao mesmo tempo seguimos a regra do menor poder.

E essa é uma das razões pelas quais os novos recursos CSS aleatórios são tão importantes… e porque eles representam algo muito maior do que apenas outro recurso .

O grande negócio

CSS sempre foi determinístico por design, e a aleatoriedade nativa rompe com essa tradição. Não é apenas mais um recurso, representa uma mudança na forma como pensamos sobre CSS como linguagem e sobre a própria plataforma web.

Pela primeira vez, CSS pode modelar sistemas naturais com variação diretamente: sem hacks, sem ferramentas, sem terceirização de decisões de layout para outras linguagens. A randomização ocupa um lugar de honra na camada de estilo, onde sempre pertenceu.

Isso abre possibilidades criativas: layouts generativos, padrões orgânicos, microinterações divertidas e sistemas de design que parecem vivos e únicos. Mas também restaura a clareza arquitetônica: cada camada da web mais uma vez faz o trabalho para o qual foi projetada.

Com essa mudança, o CSS deixa de ser apenas uma linguagem de estilo para se tornar um sistema de layout generativo. Não é mais apenas um ator passivo no desenvolvimento web; torna-se um participante ativo no processo de renderização, definindo um espaço de resultados possíveis que o navegador resolve em uma página concreta.

E esse é o grande problema. A aleatoriedade nativa não consiste apenas em fazer as coisas parecerem diferentes; trata-se de tornar a plataforma mais coerente e expressiva.

É também um lembrete de que o CSS ainda está evoluindo e que às vezes os recursos que as pessoas ignoram podem remodelar a forma como pensamos sobre uma linguagem e o que imaginamos ser possível na web.

A importância da aleatoriedade nativa em CSS originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.