Aprenda como aplicar !important em CSS

Desde que surgiu o CSS, o desenvolvimento web nunca mais foi o mesmo. Separando o código que define o estilo da página totalmente do HTML, o CSS evoluiu muito desde o seu surgimento e traz cada vez novos recursos para auxiliar o trabalho do desenvolvedor.

   No post de hoje, vamos falar sobre como aplicar !important em CSS. Confira!

   Efeito cascata

Um dos princípios básicos da linguagem é decidir qual regra CSS a ser aplicada em caso de conflito, como no exemplo abaixo:

#elemento1 {
color: black;
}
# elemento1 {
color: blue;
}

No exemplo acima o conteúdo do texto dentro do elemento de id elemento1 será azul, pois a prioridade padrão do css sempre considera a regra que vem por último. Agora utilizando o mesmo exemplo acima com uma pequena alteração:

#elemento1 {
color: black !important;
}
# elemento1 {
color: blue;
}

Veja que foi acrescido o !important na frente da regra color: black. Isso faz com que essa regra seja priorizada, não importa em que ordem ela esteja. Em caso de conflito ela é considerada. Nesse último exemplo a cor do texto será preto. Essa regra prevalecerá mesmo se for definido outra cor via código inline no elemento HTML, como abaixo:

<span id=”elemento1” style=”color: red” >Exemplo de texto</span>

   Quando utilizar o !important?

A melhor resposta para essa pergunta é nunca. Ou seja não é uma boa prática de desenvolvimento utilizar o !important – apenas se for realmente necessário. O ideal é desenvolver um código CSS bem organizado, definindo as regras para os elementos apenas uma vez, o que vai evitar conflitos e consequentemente problemas para manter esses códigos futuramente.

Utilizar o !important também causa o seguinte problema: vamos supor que você trabalha para uma empresa e desenvolveu um código CSS e colocou o !important para resolver alguns conflitos de regras.

Depois de algum tempo você saiu dessa empresa e outro desenvolvedor assume o seu código. Esse código CSS é grande, e de repente o desenvolvedor está tentando fazer uma alteração no código, mas nunca funciona. Só depois de muito tempo perdido e muita dor de cabeça, ele descobre que o elemento que ele estava tentando alterar o estilo estava com o !important em um dos arquivos na linguagem de estilo. Ou seja, todo esse problema poderia ter sido evitado se o código !important não fosse usado.

   Exceção da regra

Como toda regra tem exceção, seguem alguns casos em que o !important pode ajudar o desenvolvedor:

• Acessibilidade: pode-se utilizar o !important em casos de acessibilidade. Por exemplo um usuário que possui dificuldade em leitura pode, quando logado em seu perfil, ser aplicado um arquivo CSS com regras que sobreponham as regras padrões como font-size, onde o tamanho da fonte será maior do que o normal.

• Manutenção de emergência: às vezes é descoberto um problema crítico no layout de um site ou sistema de um cliente, e quanto mais tempo esse problema permanece em produção pior, pois pode prejudicar diretamente a usabilidade do sistema – em alguns casos até mesmo inviabilizar o uso em algumas funcionalidades.

  Nesse caso, pode ser útil utilizar regras CSS aplicando !important para resolver de imediato o problema, e só depois debugar em máquinas locais para resolver com calma o problema, corrigir da forma correta e, logo em seguida, subir para o servidor.

• Pequenas customizações em bibliotecas de terceiros: às vezes utilizamos bibliotecas de terceiros como plug-ins jquery em sites, e em alguns casos precisamos fazer pequenas alterações no CSS. Isso pode ser feito diretamente modificando o CSS que vem nos arquivos do plug-in ou criando um arquivo novo com as regras aplicando-se o !important, já que nesse caso são pequenas alterações em um estrutura já pronta. Pode-se poupar tempo fazendo dessa forma.

Esse é o !important, como abordado acima não é recomendado seu uso, mas como qualquer recurso em desenvolvimento nunca sabemos quando podemos precisar, e quando essa hora chegar é muito bom saber que eles existem.

   Aprenda uma linguagem de programação diferente!

Para enfrentar os desafios do mercado de trabalho, nada melhor do que estar muito bem preparado. A Impacta tem condições especiais para você dominar as diferentes linguagens de programação e se destacar ainda mais!

Ainda tem dúvidas sobre o uso de algum recurso específico em CSS? Deixe um comentário!