Quando falamos de desenvolvimento web, é impossível não falarmos de CSS, pois essa linguagem é o script que define toda a estrutura e o design das aplicações. E quando se trata de CSS, é possível conseguir os mesmos efeitos de diversas maneiras: as inovações do CSS3 permitiram a implementações de diversas animações e efeitos, antes efetuados através de Javascript, de maneira nativa na própria linguagem. Não podemos, no entanto, abusar da liberdade que a linguagem nos dá. Aplicações web são permissivas a ponto de nos deixar formatar nosso estilo da forma como quisermos, mas existem boas práticas que fazem toda a diferença.
Aplicando as técnicas certas, é possível evitar armadilhas que causam dor de cabeça até mesmo nos mais experientes programadores de interface. Nesse post, vamos abordar 8 erros comuns de CSS que você deve evitar, além de te mostrar como chegar à mesma solução de forma mais elegante e profissional!
Descubra de uma vez por todas a diferença entre UX e UI
1. Todos os navegadores são importantes
É importante que o seu site seja compatível com todos os navegadores, ou pelo menos com os principais que existem no mercado. Respeitar as características dos navegadores dentro do seu CSS é respeitar o seu usuário final.
Fonte: W3Counter
Mas como saber se todos os navegadores são compatíveis com código implementado? Uma das soluções que pode ser interessante é validar o seu site pelo Markup Service do próprio W3C. Nesta funcionalidade online, o seu código é validado pela entidade que regulariza os padrões de interface. Após isso, basta adequar seu script para que ele seja cross browser.
2. Não caia na tentação do CSS inline
Um dos erros mais comuns e mais perigosos é o CSS inline. Escrever códigos de estilo diretamente nas tags HTML pode ser bastante cômodo e comum ao testar uma nova configuração, ou quando deseja-se solucionar algum problema urgente, mas é preciso ter cuidado redobrado ao levar a aplicação para produção! O ‘rápido’ hoje pode se tornar bem demorado no futuro. Para o usuário, há uma perda de performance na medida que mais código precisa ser acessado pela rede, o que pode acarretar em uma lentidão maior ao renderizar a página. Para o programador, imagine uma manutenção que demande uma troca de toda a identidade visual: os CSS inline terão que ser buscados e modificados um a um. Melhor mantê-los longe do site!
3. Deixe os IDs para o Javascript
Evite criar scripts para IDs, pois eles não são feitos para a linguagem CSS. Deixe que o seu Javascript seja o único a manipular seus elementos pelo ID. Nessa situação, a melhor forma de trabalhar estilos é através de classes.
Leitura recomendada:
Leia nosso artigo sobre os frameworks de front-end: Angular, React ou Vue?
4. Tabelas: somente onde necessário!
Infelizmente, ainda é bastante comum encontrar sites institucionais que se baseiam em tabelas. Não apenas o carregamento desses elementos é mais custoso como também oferece uma série de limitações, muitas vezes imagens precisam ser recortadas para encaixar nas divisões do layout, alguns elementos de layout não funcionam (como o uso de height:100% para child-elements <td>) além de tornar o desenvolvimento e manutenção extremamente confuso e dificultado. Se a sua finalidade não é explicitamente a disposição de dados (data grids), então, na grande maioria dos casos há melhores maneiras de implementar seu layout.
5. Tenha cuidado ao usar o !Important
Todos os recursos do CSS são válidos, o que é preciso entender é quando e como devemos usá-los. O “!important” é um desses recursos que devemos ter bastante cuidado antes de lançar mão. Seletores de CSS possuem especificidades, regras atribuídas a #ids se sobrepõem a regras atribuídas a .classes, e regras em CSS Inline são ainda mais específicas. Este infográfico ilustra a evolução da especificidade com diferentes seletores. Com o !important, qualquer formatação que existe em qualquer outro lugar é desconsiderada. É preciso muito cuidado, especialmente ao usar !important em classes presentes em diversos elementos para não perder horas se perguntando por quê suas alterações de layout não surtem efeito.
6. Use unidades flexíveis
Muitas vezes, é possível encontrar alguns números perdidos dentro do CSS. Por mais que propriedades fixas em ‘px’ possam ser necessárias, um design multi-plataforma eficiente e elegante faz bom uso das porcentagens quando possível, seja em width, height, margins ou propriedades mais complexas. Além disso, você pode aproveitar as vantagens de pré-processadores como Less e Sass e definir variáveis para tamanhos e cores para facilitar a criação de layouts responsivos com o @media, mantendo a padronização e facilitando alterações. Para tipografia, é possível utilizar a unidade ‘em’ ao invés de ‘px’ ou ‘pt’ para definir font-sizes relativos.
>Leitura Recomendada:
Svelte: o framework JavaScript que não é um framework
7. Respeite as tags HTML
Estilos CSS acoplados a tags HTML são possíveis, mas não são aconselháveis. É melhor que sejam criadas mais classes CSS a ter que acoplar tags ao CSS. Assim, o seu código fica mais independente e deixa o desenvolvedor mais livre para alterar o HTML sem quebrar o layout da página.
8. Comente tudo
Código limpo e semântica preservada. Isso já gera uma enorme segurança e nitidez ao CSS. Mas não se engane, o trabalho ainda não está concluído! Mesmo um desenvolvedor experiente se assusta ao ter que confrontar um antigo script.
A linguagem CSS parece ser intuitiva, mas ela demanda cuidados. Para evitar “apertos”, o ideal é comentar o que é cada bloco de estilo CSS que for escrito. Assim, qualquer pessoa pode entender o que foi feito, inclusive quem criou o script. É possível separar o código em vários arquivos durante o desenvolvimento, o que facilita saber qual efeito está sendo aplicado a cada elemento.
Vale ressaltar que mesmo que sejam códigos semânticos e bem comentados, não é aconselhável colocá-los diretamente em um ambiente de produção justamente pelo peso do arquivo ser maior, o ideal é minificar tudo o que for possível para obter uma melhor performance em tempo de carregamento (ou mesmo servir os recursos a partir da nuvem).
No final, a melhor maneira de programar de maneira limpa e otimizada é conhecer a fundo como tudo funciona por trás da linguagem. A Geekhunter fechou uma parceria com a Udemy que fornece descontos em diversos cursos, inclusive de Front-End. Você pode conferir nossa página especial AQUI.
O que achou de nossas dicas? Já deixou passar algum desses erros? Conhece algum outro erro recorrente em CSS? Deixe seu comentário abaixo e ajude a construir uma web mais limpa e otimizada.
>>Leitura Recomendada:
Leia nosso artigo sobre o futuro do front-end
