Ao iniciar nos estudos de CSS tudo parece muito fácil, você digita color: red no arquivo de CSS e o texto fica vermelho instantaneamente, então você pensa: “É isso que vou fazer pelo resto da minha vida”, mas conforme você vai evoluindo e trabalhando em projetos mais complexos, você descobre que nem tudo são flores, e é aí que começam os problemas.
1 - Utilizar a declaração !important sem medir as consequências
Quando estamos estilizando elementos e não temos muita experiência com CSS, é muito comum quebrar a cabeça procurando o motivo de algum estilo não estar sendo aplicado ao elemento desejado, por isso é muito importante que entendamos a regra de especificidade de estilos.
Os seletores CSS são responsáveis por dizer ao browser em qual elemento da página o estilo descrito será aplicado. Por exemplo:
input#name { /* ‘input’ e ‘#name’ são os seletores dessa regra */
background-color: white;
}
input { /* ‘input’ é o seletor dessa regra */
background-color: transparent;
}
Nesse caso a regra aplicada será a primeira, mesmo ela tendo sido declarada antes, pois contém um ID, que tem prioridade sobre o seletor do elemento input. Os seletores seguem a seguinte ordem de prioridade:
- Seletor universal (
*) - Menos prioritário - Seletor de elemento HTML (
div, input, body, etc...) - Classe (
.classe) - ID (
#classe) - Estilo inline (
<div style=”color: red”>) - Mais prioritário
A declaração !important (lembre-se, o !important não é um seletor) é usada para superar qualquer prioridade de seletor, sendo assim, ela só é “vencida” por outro !important. Isso pode parecer inofensivo no ínicio mas quanto mais alterações você faz, mais usará outro !important para poder superar a prioridade da declaração anterior, gerando assim uma bola de neve que pode causar muita dor de cabeça para você e todos os outros desenvolvedores front-end do projeto. Então evite esses problemas e tenha muito cuidado ao usar o !important, senão cada alteração que você for fazer, vai ficar quebrando a cabeça para entender as prioridades da sua regra.
2 - Não organizar a estrutura do seu HTML e CSS
Uma solução para o problema de prioridades citado anteriormente é organizar a estrutura de classes do seu site, utilizando nomenclaturas semânticas e intuitivas para os desenvolvedores que poderão vir a trabalhar nesse projeto, tornando assim a manutenção e legibilidade do código muito mais fáceis.
Existem diversas convenções de como nomear seus elementos, porém o que recomendo você utilizar é o BEM.
O BEM tem três conceitos principais:
- Bloco: Funciona como um componente independente, o nome do bloco deve descrever o seu propósito (
contact-form, footer, menu, button). - Elemento: É uma parte que compõe um bloco e não pode ser utilizada separadamente de seu bloco pai. Seu nome deve descrever o elemento sem conter características (red, big), e é precedido do nome de seu bloco pai seguido de dois underscores. (
contact-form__item, footer__text) - Modificador: São usados para definir aparência, comportamento ou estado do elemento, são precedidos de um hífen. (
contact-form__item-disabled, footer__text-big).
Utilizar essa ou alguma outra metodologia de organização, além de ter os benefícios citados anteriormente, também faz com que seus componentes possam ser reutilizados de forma muito mais simples e independente do contexto.
3 - Abusar de animações e transições (principalmente as não performáticas)
Atualmente, a performance de websites tem sido um dos principais alvos de preocupação e discussão entre os desenvolvedores, porém mesmo dando tanta importância para o assunto, algumas pessoas focam apenas no tempo de carregamento da página e de requisições HTTP e acabam se esquecendo da experiência do usuário e do desempenho do website após o carregamento.
Em sites modernos, é muito difícil não utilizar animações em seus elementos, e se isso não for utilizado com cuidado pode acabar causando uma grande queda de FPS (quadros por segundo) para o usuário.
Como podemos ver na GIF acima, animações em 60fps são muito mais fluidas e agradáveis para o usuário, então como faço para para que elas fiquem assim na minha aplicação?
A maioria das transições em CSS que estamos acostumados a fazer são renderizadas pelo browser usando a CPU (processador), como a animação dos atributos top, right, bottom, left, width e height. Como a função principal da CPU não é a renderização gráfica, a melhor forma de otimizar essas transições é transferindo o trabalho duro para a GPU (Unidade gráfica de processamento). Para fazer isso você deve utilizar as seguintes opções nos elementos desejados:
- Para animar posição do elemento, utilize a propriedade
transform: translate( x%, y%); (Os parâmetros podem ser passados em px ou %). - Para animar o tamanho do elemento, utilize a propriedade
transform: scale( x, y); - Para animar o orientação do elemento, utilize a propriedade
transform: rotate(Xdeg); - Para animar a opacidade do elemento, utilize a propriedade
opacity: (0…1);
É comum levar algum tempo para se acostumar com a ideia de se limitar a essas soluções para que sua transição seja suave e agradável ao usuário, mas a diferença de performance é visível, e consequentemente seu site terá mais engajamento.
4 - Não testar os projetos nos dispositivos e browsers mais utilizados
Infelizmente nem todos os usuários acessam seu site de um dispositivo igual ao que você utilizou para desenvolvê-lo, muito pelo contrário. Atualmente a maioria dos acessos à internet são feitos a partir de um smartphone. Por isso para garantir que seu site funcione perfeitamente em todos os aparelhos e browsers, o ideal é que você utilize os equipamentos reais, ou seja, não apenas testar no seu computador utilizando outras resoluções de tela, ou algum simulador de iPhone ou iPad online.
Existem diversas ferramentas para ajudar o desenvolvimento e a manutenção de aplicações web mobile, o próprio Google Chrome permite realizar um debug remoto por meio do Remote Debugging, porém essa ferramenta funciona apenas para dispositivos Android.
Outra solução muito completa para testes em dispositivos móveis é o VorlonJS, que roda um servidor em sua máquina de desenvolvimento, para que todos os dispositivos que forem acessar esse servidor possam ser debugadas por meio de uma ferramenta muito semelhante ao F12 do Google Chrome ou do Mozilla Firefox.
