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.
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!