Miriam Suzanne é autor, artista e desenvolvedor Web em Denver, Colorado. No momento, está trabalhando em especificações de CSS incríveis, como "Consultas de contêiner" e "Camadas Cascade".
Esta postagem é parte do Designcember. Uma homenagem ao web design, desenvolvido pelo web.dev.
Miriam Suzanne é autor, artista e desenvolvedor Web em Denver, Colorado. Ela é cofundadora da OddBird (uma agência da Web), redatora da CSS Tricks, membro da equipe principal Sass e especialista convidada W3C no grupo de trabalho do CSS. Ultimamente, ela tem se concentrado em desenvolver novos recursos de CSS, como "Camadas de cascata", "Consultas de contêiner" e "Escopo". Off-line, Miriam é uma romancista, dramaturga e músico publicada. Conversamos sobre o trabalho dela com Sass e CSS.
Rachel: Fiquei sabendo do seu trabalho pelo framework de grade Susy. O que levou você a criar isso?
Miriam: Em 2008, o layout na Web era uma experiência muito diferente. Os desenvolvedores deixaram de usar o layout de tabela e passaram a usar grades flutuantes mais semânticas, mas que ainda são complexas. Houve um boom nas "estruturas de grade" de 12 colunas únicas, fornecendo uma grade predefinida (geralmente estática) com um conjunto de classes CSS predefinidas. Se precisasse de algo mais personalizável, você 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 uma série de problemas de compatibilidade de navegadores relacionados a pontos flutuantes fluidos.
Eu estava usando a abordagem de sistemas CSS de Natalie Downe, que foi inteligente em responder aos tamanhos de fonte e janela de visualização, mas fiquei frustrada com toda a matemática repetitiva e as invasões de navegador necessárias. Ao mesmo tempo, a Sass estava começando a chamar atenção, e ela se encaixava perfeitamente no que eu precisava. O primeiro rascunho da Susy foi muito simples: apenas alguns mixins para fazer as contas e adicionar os truques que eu precisava. O objetivo era ter o mínimo de produção possível e exibir apenas o código essencial. Grades totalmente personalizáveis, sem classes predefinidas.
Rachel: Como você deixou de trabalhar em um pré-processador de CSS e passou a trabalhar com as especificações de CSS? Você acha que trabalhar no pré-processador foi um bom histórico para escrever especificações?
Miriam: Na minha experiência, há muita sobreposição e ainda sou muito ativo em ambos os lados nessa divisão. Mas acredito que isso se deve em grande parte à equipe Sass, liderada por Natalie Weizenbaum, que tem uma visão de longo prazo: tentar desenvolver ferramentas que se integrem perfeitamente ao desenvolvimento de padrões da Web. ir além da "opinião" de uma maneira única soluções e ter flexibilidade de longo prazo é essencial quando se pensa no futuro dos principais padrões da Web.
Como podemos criar ferramentas que respeitem a diversidade de necessidades e abordagens dos desenvolvedores, além de incentivar e facilitar a acessibilidade e outras considerações importantes?
Rachel: Estamos recebendo vários recursos do CSS que substituem as funcionalidades que faziam parte do Sass. Existem fortes motivos para ainda usar algo como o Sass?
Miriam: Sim, para algumas pessoas, mas não há uma resposta universal. Veja as variáveis, por exemplo. Variáveis Sass têm um escopo lexical e são compiladas no servidor, com estruturas de dados organizadas, como listas e objetos, manipulação de cores etc. Isso é ótimo para lógica de sistema de design que não precisa ser executada no navegador.
As variáveis CSS se sobrepõem e também podem armazenar valores, mas oferecem um conjunto totalmente diferente de pontos fortes e fracos baseados em cascata. O Sass não pode lidar com propriedades personalizadas, e o CSS realmente não consegue lidar com dados estruturados. Ambas são úteis e poderosas, mas suas necessidades específicas podem variar.
Acho ótimo quando as pessoas podem eliminar ferramentas que não precisam mais e alguns projetos podem não exigir tanto variáveis do lado do servidor quanto do cliente. Excelente. No entanto, é muito simples presumir que eles são idênticos, e um simplesmente substitui o outro. Sempre haverá casos de uso para que alguma lógica de design aconteça 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 a longo prazo.
Rachel: Há algo que surpreendeu você ao se envolver mais no trabalho de criação de padrões ou algo que você acha que as pessoas geralmente não sabem sobre o processo?
Miriam: Antes de me envolver, o processo de padronização parecia uma caixa preta misteriosa e mágica, e eu não sabia o que esperar. Eu tinha medo de não ter conhecimento suficiente de componentes internos do navegador para contribuir, mas a realidade é que eles não precisam de mais engenheiros de navegador. Ela precisa de mais desenvolvedores e designers que criem sites e aplicativos em tempo real.
Fiquei surpreso ao descobrir que poucas das pessoas envolvidas se concentram principalmente em padrões, mas também muito poucas delas estão principalmente em desenvolvimento ou design de sites. O W3C é composto por "voluntários" de organizações-membros (geralmente pagas por essas organizações, mas não como seu trabalho principal) e a associação não é barata. Isso distorce os participantes do cotidiano em designers e desenvolvedores, especialmente aqueles que trabalham com o cliente em pequenas agências ou como freelancers. Minha função como Especialista Convidado seria totalmente voluntária, um hobby caro, se eu não tivesse encontrado financiamento externo para esse trabalho.
Na realidade, o processo é bastante aberto e público e precisa da participação dos desenvolvedores. No entanto, sempre há tantas conversas acontecendo ao mesmo tempo, e pode ser difícil encontrar seu lugar. Especialmente se esse não for seu trabalho diário.
Rachel: As consultas em contêineres têm sido o Santo Graal para muitos desenvolvedores Web há muitos anos. Estou muito feliz por recebê-los. Acho que muita gente está pensando sobre a utilidade das consultas em contêineres. Você acha que elas também têm potencial para aumentar a criatividade?
Miriam: Com certeza, mas não vejo isso como algo totalmente separado. Todos nós temos tempo limitado e estamos tentando escrever códigos fáceis de manter e eficientes. Quando algo é difícil de fazer, é menos provável que usemos a criatividade.
Ainda assim, o setor da Web agora é dominado por grandes interesses corporativos, e essas preocupações de negócios sempre recebem mais tempo de exibição do que os artistas da Web. E acho que vamos perder muito se ignorarmos a criatividade na Web como um caso de uso principal para recursos. Fiquei muito feliz em ver o pessoal de arte do CSS brincando com o protótipo de consulta de contêiner. Jhey Tompkins criou uma demonstração inteligente e interativa das persianas venezianas do CSS (links em inglês) como comentário sobre o antigo meme anti-CSS. Acho que há muito mais para explorar nesse espaço 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 consultas de estilo: a capacidade de escrever estilos condicionais com base no valor de uma propriedade ou variável CSS. É um recurso extremamente poderoso e, até agora, praticamente inexplorado. Acho que isso abre ainda mais oportunidades criativas!
Rachel: No CSS, existe algo que você acha que seria útil ou não podemos fazer (ou temos alguma solução futura) no CSS?
Miriam: Estou muito animada com outras especificações em que estou trabalhando. As camadas em cascata darão aos autores mais controle sobre os problemas de especificidade, e o escopo ajudará com um seletor de segmentação mais preciso. Mas ambas são preocupaçõ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 de tempo" de contêiner, permitindo uma transição suave entre valores entre pontos de interrupção de mídia ou contêiner. Isso tem implicações muito práticas para a 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 agora?
Miriam: Ah, eu nem sei como responder, há tantas pessoas fazendo trabalhos criativos em áreas tão diferentes. Há muitos padrões interessantes em desenvolvimento no CSSWG e na interface aberta, incluindo parte do seu trabalho sobre fragmentação. No entanto, muitas vezes eu encontro mais inspiração em artistas da Web e em 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 expandindo os limites do que as tecnologias da Web podem fazer visual e interativamente. Até mesmo pessoas que fazem trabalhos mais voltados para os 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 incentivando a reconsiderar o que queremos da Web e das mídias sociais em particular. Confira o novo minus.social dele, 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.