O que os desenvolvedores de CSS fazem e por que você precisa de um

Os desenvolvedores de CSS são profissionais da web cuja principal responsabilidade é entregar um produto polido e com estilo para o navegador do visitante. Praticamente todos os sites usam CSS, mas o CSS geralmente não é considerado “igual” na pilha de desenvolvimento web moderna. Infelizmente, essa percepção errônea pode levar o CSS a ser dado como certo, ou até mesmo negligenciado até certo ponto.

Permitir que desenvolvedores não-CSS lidem com CSS geralmente resulta na introdução de hacks e bugs de CSS em seu código e pode causar frustração desnecessária para os desenvolvedores. Neste artigo, gostaria de familiarizar a todos com o que o trabalho abrange para que você possa entender melhor por que cada site precisa de um desenvolvedor CSS profissional e confiável.

O que os desenvolvedores de CSS fazem?

Vamos começar com o básico. Por que o CSS é tão importante e o que exatamente os desenvolvedores de CSS devem fazer?

CSS é uma linguagem específica e, como tal, não pode existir por conta própria. Requer HTML para fazer sentido. Então, a primeira coisa que os desenvolvedores de CSS fazem é escrever código HTML.

Escrever HTML arrumado é sempre importante

Escrever um HTML simples, limpo e adequadamente organizado é uma grande responsabilidade porque o humilde documento HTML é a primeira coisa que você entrega aos seus usuários finais.

Se você estiver escrevendo um documento HTML pronto para produção, tente incluir todas as tags obrigatórias e opcionais no cabeçalho do documento para aproveitar ao máximo seu site. Estou falando sobre definir o tipo de documento correto, idioma, meta tags, favicons, técnicas de carregamento e SEO.

Tudo o que pode ajudar a tornar seu site mais performático, mais acessível e proporcionar mais exposição ao seu público e mecanismos de busca, além de outros serviços e ferramentas. O corpo do documento HTML também não deve estar inchado. Saber quando usar tags HTML semânticas, como adicionar atributos HTML necessários e como evitar aninhamento profundo ou divitis não deve ser ignorado, mas implementado desde o início do projeto. Nenhum desenvolvedor profissional começa a seguir as melhores práticas no meio do projeto, mas mesmo coisas aparentemente básicas, como HTML, geralmente são feitas de maneira errada.

O design geral geralmente determina como organizamos vários componentes HTML. Os desenvolvedores de CSS trabalham em estreita colaboração com os designers, e nem todos os designers usam a mesma ferramenta para fornecer o design. Estar familiarizado com Sketch, Photoshop, InVision ou Figma e ser capaz de “fatiar” o design são habilidades obrigatórias para desenvolvedores de CSS. Deve-se sempre ter em mente como estruturar um componente para possibilitar a aplicação do projeto ao mesmo tempo. Usar uma boa convenção de nomenclatura, como BEM ou OOCSS, deve evitar escrever HTML inchado ou código CSS insustentável.

JavaScript está em todo lugar

Alguns componentes devem ser interativos, como modais ou dicas de ferramentas. Isso geralmente requer uma boa compreensão de JavaScript, não JavaScript “profundo”, mas eventos JavaScript e manipulação de DOM. O manuseio do DOM pode ser um desafio porque você não quer drenar os recursos do seu usuário e tornar seu site lento ou, pior ainda, travá-lo e torná-lo completamente sem resposta.

O mundo JavaScript está evoluindo rapidamente e, às vezes, parece que novos frameworks e ferramentas aparecem diariamente. Devido à imensa popularidade do JavaScript, manter-se atualizado é fundamental se você quiser usar as práticas recomendadas mais recentes e oferecer a experiência mais agradável aos usuários finais.

CSS

Isso também é verdade para o CSS, embora muitos argumentem que ele não evolui quase no mesmo ritmo que o JavaScript. No entanto, novos recursos, como variáveis ​​CSS, grade CSS ou mesmo Flexbox, exigem algum tempo para serem dominados.

Depois, há o suporte ao navegador, que ainda pode representar um problema até hoje. Seu site pode parecer um milhão de dólares em um navegador moderno, mas não tanto em navegadores legados. O Flexbox pode ser suportado no IE11, mas, novamente, pode não funcionar conforme o esperado. Saber como evitar esses problemas faz parte do trabalho de um desenvolvedor de CSS.

Felizmente, a comunidade é muito útil, e sites como Flexbugs ou Gridbugs podem economizar muito tempo.

Ferramentas, técnicas e princípios CSS

Às vezes, podemos contar com ferramentas como executores de tarefas ou empacotadores como Grunt, Gulp e webpack para nos ajudar a fornecer um código confiável. Você pode sobrecarregar seu código com linters, minifiers, babel ou PostCSS para transpilar o código.

Em seguida, precisamos levar em consideração várias fontes, tipografia, imagens, ícones, fontes de ícones, animações, transições e outros aspectos abstratos que fazem parte das tarefas cotidianas dos desenvolvedores de CSS. Cada recurso tem sua especificidade, limitações, problemas e soluções. Quanto mais recursos e técnicas você dominar, mais fácil será estilizar e implementar componentes em seu projeto.

Há um número significativo de propriedades e valores CSS, e não se pode saber tudo. Felizmente, nossas ferramentas nos ajudam lá, especialmente editores de código e ferramentas de desenvolvimento. No entanto, mesmo as ferramentas não podem ajudar a resolver dores de cabeça quando você precisa resolver um problema de z-index. Falhar é a melhor maneira de aprender.

Eu diria que isso é especialmente verdade quando se trabalha com CSS, e é por isso:

Se você nunca tentou resolver o problema do z-index, nunca aprenderia sobre o empilhamento de contexto. Se você nunca tentou substituir a classe Bootstrap, nunca aprenderia sobre especificidade. Se você nunca tentou corrigir o problema de flutuação, nunca aprenderia sobre o modelo de caixa.

Às vezes, a solução é simples, mas apenas fazer uma pergunta é difícil. Quando comparado a outros idiomas, você não pode perguntar por que meu loop não está funcionando. Você precisa do contexto completo para resolver o problema em CSS, e isso geralmente é algo que muitos não entendem: o cascade .

Cascade é o melhor recurso em CSS e deve funcionar para você, não contra você. Alguns desenvolvedores contornam isso inventando abordagens personalizadas como CSS-in-JS. Se você empacotar seu CSS no ambiente encapsulado como React, você não poderá usá-lo em outro lugar. Duvido que esta seja a abordagem que você deseja em sua plataforma escalável. Se você tiver problemas com a cascata, aprenda a abraçá-la e depois aprenda a domá-la.

Enquanto eu preparava este artigo, Max Bock escreveu sobre a mentalidade do CSS, e é exatamente isso que os desenvolvedores de CSS precisam fazer. Os desenvolvedores de CSS pensam dentro da caixa, preveem modificações de conteúdo e evitam números fixos sempre que possível enquanto tentam escrever o mínimo de código possível sem substituir valores e contexto padrão.

Por que você precisa de um desenvolvedor CSS?

A maioria dos desenvolvedores front-end ou mesmo full-stack poderia escrever o código CSS. Mas nem todos eles podem corrigir todos os bugs de CSS ou implementar o design sem enrolar o código HTML ou confiar em JavaScript onde não é necessário.

Um desenvolvedor CSS profissional se preocupa com o código até os detalhes finais, gosta de criar layouts e componentes, mesmo os mais complicados, e sabe como resolver todos os problemas ou bugs.

Padrões de codificação CSS

Antes de escrever qualquer código, geralmente é uma boa ideia ter algumas regras básicas sobre como escrever código. Os desenvolvedores de CSS devem respeitar o padrão de codificação - é essencial para a manutenção e escalabilidade do projeto.

Escolha qual convenção de nomenclatura usar em todo o projeto. Estabelecer uma convenção de nomenclatura desde o início pode ajudar os desenvolvedores a produzir um código melhor e mais organizado. Ele também pode ajudar todos os envolvidos no projeto a entender a estrutura do componente e o relacionamento entre componentes e elementos lendo apenas o código HTML.

Decida como lidar com recuo, tipos de seletor, propriedades abreviadas, unidades em CSS. Por exemplo, evite usar unidades de pixel se o padrão de codificação propor o uso de unidades rem. Todo mundo tem um estilo de escrita/codificação distinto, mas como profissional, você precisa ser capaz de adotar e, mais importante, entender cada conceito.

Implementação de Design CSS

Antes de converter o design em código, você deve dedicar um tempo para entender cada página, layout e componente. Se possível, disseque cada página, crie uma lista de páginas e componentes e tente encontrar um padrão.

Se você notar um componente que está presente em mais páginas, você deve reconhecer o ambiente ao seu redor e tentar pensar nele como um componente autônomo. Se houver componentes semelhantes, como cartões ou listas, você poderá ter uma variação do mesmo componente. Dessa forma, você pode reutilizar o código HTML e escrever apenas um pouco de código CSS para fazê-lo parecer modificado.

Também é uma boa ideia tentar encontrar padrões em outras áreas, como tipografia e espaçamento. Às vezes, isso leva a ter classes auxiliares que podem ser usadas em todo o projeto, em vez de páginas individuais.

Organize seu código CSS

Os desenvolvedores de CSS devem organizar seu código e criar uma estrutura significativa para todos. Ao usar ferramentas como processadores CSS, os desenvolvedores CSS devem documentar o processo de geração do código compilado.

Se necessário, os desenvolvedores de CSS podem criar guias de estilo. Os guias de estilo podem ser uma referência ao criar novas páginas ou decidir como abordar as existentes. Meu conselho é tornar o guia de estilo globalmente disponível para toda a equipe, porque geralmente é muito mais fácil tomar uma decisão quando se tem um contexto visual. Os guias de estilo podem conter paletas de cores, regras de tipografia, padrões de codificação e até páginas estáticas. Não há limites, exceto o orçamento e sua imaginação.

Código CSS em Produção

Escrever código CSS implica lidar com problemas entre navegadores, bugs, animações, transições, responsividade e estilos de impressão. Muitos desses recursos não são facilmente gerenciáveis ​​por desenvolvedores versáteis. Eu iria tão longe e diria que essas são as tarefas CSS menos favoritas em geral, e nem todo desenvolvedor sabe como lidar com elas. Por outro lado, desenvolvedores CSS especializados sabem (ou pelo menos deveriam saber) como produzir código com cada bug, navegador e ambiente em mente.

Usar abordagens modernas é um caminho a seguir, mas o suporte a navegadores mais antigos e o respeito às configurações do usuário, como movimentos reduzidos, também não devem ser ignorados.

Os desenvolvedores de CSS também escrevem código HTML e JavaScript. Isso significa que a entrega de ativos é responsabilidade do desenvolvedor CSS. Os desenvolvedores de CSS devem ser responsáveis ​​por carregar fontes, extrair CSS crítico, usar carregamento JavaScript adiado e assíncrono e fornecer imagens responsivas.

Nenhuma dessas técnicas é fácil de implementar e não existe uma bala de prata.

O que os desenvolvedores de CSS podem fazer por você

Todos os itens acima explicam por que você precisa de um desenvolvedor CSS dedicado. Aqui estão apenas algumas das coisas cruciais que eles lidam:

• Garantir que todos os membros do projeto sigam o padrão de codificação
• Implementar projeto
• Organize o código
• Escreva o código
• Corrigir erros
• Conheça novas técnicas
• Melhore o código

Empacotando

Por muito tempo, a questão da existência e importância do papel dos desenvolvedores de CSS encorajou discussões não particularmente construtivas e bem-intencionadas. Vamos tentar concordar e reconhecer o desenvolvedor CSS como um papel adequado de uma vez por todas.

Em seu artigo, The Great Divide , Chris Coyier cita alguns dos líderes de tecnologia, e a maioria deles concorda que deveria haver uma divisão, deveria haver uma função baseada em CSS que não requer o conhecimento de frameworks JavaScript modernos. Pode ajudar se você souber mais do que “apenas CSS”, mas a função deve existir e deve ser aceita como igual a funções baseadas em JavaScript.

Afinal, você quer deixar seu produto nas mãos de um profissional especializado que possa poli-lo com perfeição, ou se contentaria com o bom o suficiente ?

Leitura adicional no Blog da Toptal Engineering:

• Como abordar animações SVG em CSS