CSS !important - O melhor amigo do desenvolvedor hard-coded
• 204,847 views
Você está lá todo feliz codificando seu CSS, quando de repente aquele parágrafo que era para estar vermelho, está verde!
Você examina sua folha de estilo e lá está declarado direitinho.
p { color: red; }
Percorre o CSS inteiro e verifica que essa regra é a última que você escreveu e também é a última a ser importada no documento.
Abre o firebug e não consegue entender o porquê daquilo estar acontecendo.
Corre para o código HTML e vê que não há nenhum estilo inline declarado no parágrafo.
Ah! Com certeza deve ser o maldito cache que você esqueceu de apagar! Limpa ele, mas mesmo assim o parágrafo insiste em continuar na cor verde.
O quê fazer? Se você é um pouquinho mais experiente com CSS vai partir para ignorância e utilizar a técnica !important.
p { color: red !important; }
E voilà, funcionou! E se funcionou está tudo bem, certo? Errado!
Primeiro pare e pense na sigla CSS, Cascade Style Sheet.
O que exatamente significa uma folha de estilo funcionar em cascata?
Significa que existem prioridades para aplicação de cada regra de estilo. Existe uma hierarquia que define qual propriedade deve ser aplicada em qual elemento. E para quem trabalha com CSS é preciso conhecer muito bem esses conceitos que envolvem o chamado “efeito cascata”.
Uma declaração de estilo com !important ignora qualquer hierarquia e prevalece sobre todas as demais, é a de mais alta prioridade.
Logo, é fácil prever que o uso excessivo dessa técnica pode causar muita dor de cabeça no futuro. Não estou dizendo que é ruim utilizar o !important, na verdade pode ser útil em diversas situações, o problema é que muitos desenvolvedores de forma preguiçosa ou simplesmente desconhecendo a precedência dos seletores, acabam por escolher esse caminho mais curto na correria dos prazos, mas que depois dificultam e muito a manutenção do código.