Miriam Suzanne é autora, artista e desenvolvedora da web em Denver, Colorado, e atualmente trabalha em especificações de CSS interessantes, como ContainerQueries e Cascade Layers.
Esta postagem é parte da Designcember. Uma celebração do web design, feita até você pelo web.dev.
Miriam Suzanne é autora, artista e desenvolvedora da web em Denver, Colorado. Ela é cofundadora da OddBird (uma agência da Web), redator da equipe do CSS Tricks, membro da equipe principal da Sass e especialista do W3C no grupo de trabalho de CSS. Ultimamente, ela tem se concentrado no desenvolvimento de novos recursos de CSS, como Camadas Cascade, Consultas de contêiner e Escopo. Off-line, Miriam é uma escritora, dramaturga e musicista que publicou. Conversamos sobre o trabalho dela com Sass e CSS.
Rachel: Descobri seu trabalho pela Susy porque você criou o modelo de grade. O que levou você a criar isso?
Miriam:em 2008, a experiência com o layout na Web era muito diferente. Os desenvolvedores deixaram de usar o layout de tabela para ter grades flutuantes mais semânticas, mas ainda instáveis. Houve um aumento nas "estruturas de grade" de 12 colunas, de tamanho único, oferecendo uma grade predefinida (geralmente estática) com um conjunto de classes CSS predefinidas. Se você precisava de algo mais personalizável, estava por conta própria. Ficou claro que os sites precisavam se tornar mais responsivos, mas as consultas de mídia ainda não estavam disponíveis, e havia muitos problemas de compatibilidade de navegadores com flutuações fluidas.
Eu estava usando a abordagem de Sistemas CSS de Natalie Downe, que foi inteligente ao responder aos tamanhos de fonte e janela de visualização, mas me frustrou com todos os cálculos repetitivos e invasões no navegador necessárias. Ao mesmo tempo, Sass estava começando a chamar atenção, e isso se encaixava perfeitamente no que eu precisava. O primeiro rascunho da Susy era muito simples: apenas alguns mixins para fazer as contas e adicionar as dicas de que precisava. O objetivo era ser mínimo e gerar apenas o código essencial. Grades totalmente personalizáveis, sem classes predefinidas.
Rachel:Como você mudou do trabalho em um pré-processador de CSS para o de especificações de CSS? Você acha que trabalhar no pré-processador foi uma boa referência para escrever especificações?
Miriam: Na minha experiência, há muita sobreposição, e continuo sendo muito ativo em ambos os lados dessa divisão. Mas acho que isso se deve em grande parte à equipe da Sass, liderada por Natalie Weizenbaum, que tem uma visão de longo prazo, tentando desenvolver ferramentas que se integrem perfeitamente ao desenvolvimento de padrões da Web. Ir além das soluções "opinativas" únicas e desenvolver uma flexibilidade de longo prazo é essencial quando você pensa no futuro dos principais padrões da Web.
Como podemos criar ferramentas que respeitem a diversidade de necessidades e abordagens dos desenvolvedores, sem deixar de incentivar e facilitar a acessibilidade e outras considerações importantes?
Rachel:Há várias coisas no CSS que basicamente substituem funcionalidades que faziam parte do Sass. Existem fortes razões para ainda usar algo como o Sass?
Miriam:sim, para algumas pessoas, mas não existe uma resposta universal. Veja as variáveis, por exemplo. As variáveis Sass têm escopo lexal e são compiladas no servidor, com estruturas de dados organizadas, como listas e objetos, manipulação de cores etc. Isso é ótimo para a lógica do sistema de design que não precisa ser executada no navegador.
As variáveis CSS têm alguma sobreposição e também podem armazenar valores, mas fornecem um conjunto totalmente diferente de pontos fortes e fracos baseados em cascata. O Sass não processa propriedades personalizadas, e o CSS não processa dados estruturados. Ambas são úteis e poderosas, mas suas necessidades específicas podem variar.
Acho que é ótimo quando as pessoas podem eliminar ferramentas de que não precisam mais, e alguns projetos podem não exigir variáveis do lado do servidor e do cliente. Excelente. Mas é muito simples presumir que isso significa que eles são idênticos, e um simplesmente substitui o outro. Sempre haverá casos de uso para algumas lógicas de design acontecerem no lado do servidor e outras no lado do cliente, mesmo se chegarmos ao ponto em que as linguagens fornecem essencialmente os mesmos recursos. Os pré-processadores estão conosco por longo prazo.
Rachel: Há algo que surpreendeu você ao estar mais envolvido no trabalho de criação de padrões ou que você acha que as pessoas geralmente não estão cientes do processo?
Miriam:antes de me envolver, o processo padrão parecia uma caixa preta misteriosa e mágica, e eu não sabia bem o que esperar. Eu tinha medo de não ter conhecimento suficiente sobre aspectos internos do navegador para contribuir, mas a realidade é que eles não precisam de mais engenheiros de navegadores. Elas precisam de mais desenvolvedores e designers que criem sites e aplicativos livremente.
Fiquei surpreso ao descobrir que muito poucas pessoas envolvidas estão concentradas principalmente em padrões, mas também poucas delas estão principalmente desenvolvendo ou projetando sites. O W3C é composto de "voluntários" de organizações-membros (geralmente pagos por essas organizações, mas não como trabalho principal) e a associação não é barata. Isso distorce os participantes dos designers e desenvolvedores do dia a dia, especialmente aqueles de nós que trabalham com clientes em pequenas agências ou freelancer. Minha função como especialista convidado seria totalmente voluntária e um hobby caro, se eu não tivesse encontrado financiamento externo para esse trabalho.
Na realidade, o processo é bastante aberto, público e requer o envolvimento do desenvolvedor. No entanto, sempre há tantas conversas acontecendo ao mesmo tempo, pode ser difícil encontrar seu lugar. Especialmente se não for seu trabalho diário.
Rachel: As consultas de contêiner têm sido o segredo para muitos desenvolvedores da Web há muitos anos. Estou muito feliz por eles estarem sendo recebidos. Acho que muitas pessoas estão pensando na utilidade das consultas de contêiner. Você acha que elas também têm potencial para desbloquear mais criatividade?
Miriam: Claro, embora não considero que sejam totalmente separadas. Todos temos tempo limitado e estamos tentando escrever um código de manutenção e desempenho. Quando algo é difícil de fazer na prática, somos menos propensos a usar a criatividade.
Ainda assim, o setor da Web agora é dominado por grandes interesses corporativos e essas preocupações comerciais sempre têm mais tempo de exibição do que os artistas da Web. Acho que perdemos muito se ignorarmos a criatividade na Web como um dos principais casos de uso para recursos. Estou muito animado para ver algumas das pessoas de arte do CSS brincando com o protótipo de consulta de contêiner. Jhey Tompkins criou uma demonstração particularmente inteligente e interativa de persianas venezianas do CSS como comentário sobre o antigo meme anti-CSS. Acho que há muito mais para explorar nessa área e mal posso esperar para ver o que mais as pessoas vão inventar.
A conversa também se concentrou em consultas baseadas em tamanho, como o caso de uso original, mas estou animado para ver o que as pessoas fazem com as consultas de estilo: a capacidade de escrever estilos condicionais com base no valor de uma propriedade ou variável CSS. Esse é um recurso extremamente eficiente e até agora pouco explorado. Acho que isso abre ainda mais oportunidades criativas!
Rachel: Na sua opinião, há algo que não podemos fazer (ou que tenhamos planos para fazer) no CSS?
Miriam: estou muito empolgada com as outras especificações em que estou trabalhando. As camadas em cascata oferecem aos autores mais controle sobre problemas de especificidade, e o escopo ajuda na segmentação de seletor mais precisa. No entanto, ambas são questões arquitetônicas de alto nível. O artista em mim está mais animado com coisas como alternâncias de CSS, uma maneira declarativa de criar estilos interativos ou "linhas do tempo" de contêiner, permitindo fazer a transição de valores entre pontos de interrupção de mídia ou contêiner com facilidade. Isso tem implicações muito práticas para tipografia responsiva, mas também abriria muitas oportunidades criativas para arte e animação responsivas.
Rachel:Quem mais está fazendo um trabalho muito interessante, divertido ou criativo na Web atualmente?
Miriam: Ah, não sei como responder, há tantas pessoas trabalhando de forma criativa em áreas tão diferentes. Há muitos padrões interessantes em andamento no CSSWG e na Open-UI, incluindo parte do seu trabalho sobre fragmentação. Mas muitas vezes eu me inspiro com os web artistas e como as pessoas estão colocando essas ferramentas em produção, de maneiras que não estão diretamente ligadas ao comércio. Pessoas como Jhey, Lynn Fisher ou Yuan Chuan ou muitas outras que estão ampliando os limites do que as tecnologias da Web podem fazer de maneira visual e interativa. Até mesmo pessoas que fazem mais trabalhos voltados a negócios podem aprender muito com suas técnicas artísticas.
Também gosto da arte da Web mais conceitual de pessoas como Ben Grosser, que continua nos forçando a reconsiderar o que queremos da Web e da mídia social em particular. Confira o novo minus.social, por exemplo.
Rachel:Acompanhe o trabalho de Miriam sobre CSS em css.oddbird.net e descubra o que mais ela está fazendo no site miriam.codes e no Twitter @TerribleMia (links em inglês).