Escolha uma categoria

Uso do !important no CSS

E lá está você … feliz terminando seu site, quando de repente aquela div que deveria estar com o fundo vermelho na verdade está com o background verde.

Então você vai no CSS e faz a alteração clássica:

.nomeDaSuaDiv { background-color: #F00; }

… e não funciona e você começa a ficar um pouco mais careca … e você se pergunta por quê … revisa e revisa, dá F5 … nada dá certo. Então você pega pesado e vai na veia do código:

<div class=”vermelha” style=”background-color:red;”></div> e ainda sim não funciona… e você perde mais algumas horas … tenta encontrar o erro através do FireBug, coloca a culpa no Cache … reinicia modem, usa o PC da vizinha que não tem o site em Cache …  e mais algumas horas … até encontrar um javascript que estava mudando a cor da div.

Pra que serve !important no css

Isso realmente acontece muito, principalmente quando você trabalha com Frameworks como WordPress e Joomla. Você instala um plugin e é só bomba! O plugin vem com um CSS com classes e ID’s super populares e estraga toda a brincadeira. Porém … existe uma solução rápida e fácil para corrigir estes erros de CSS. O recurso !important.

Utilizando o exemplo da div que deveria estar com o fundo vermelho, mas está verde, por exemplo, você pode fazer o seguinte, em seu CSS:

div.vermelha { background-color: red !important;

A declaração “background-color: #F00 !important;” ignora qualquer hierarquia existente e prevalece sobre todas as demais. Resumindo: é a de mais alta prioridade. 

Há quem diga que não se deva utilizar o recurso !important e não utilizar CSS inline pois o CSS deve respeitar a semântica, hierarquias e blá blá blá.

Eu, sinceramente, vou sempre pelo atalho. Resolveu? Funcionou? O cliente ficou satisfeito? É o que importa! 1kb a mais de código não é motivo pro usuário deixar seu site por “lentidão“.

 

Shoriuken!

 

Deixe uma resposta

O seu endereço de email não será publicado. Required fields are marked *

*