{"id":7753,"date":"2015-09-18T12:25:02","date_gmt":"2015-09-18T15:25:02","guid":{"rendered":"http:\/\/www.impacta.com.br\/blog\/?p=7753"},"modified":"2015-09-18T12:25:02","modified_gmt":"2015-09-18T15:25:02","slug":"aprenda-como-aplicar-important-em-css","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/aprenda-como-aplicar-important-em-css\/","title":{"rendered":"Aprenda como aplicar !important em CSS"},"content":{"rendered":"

Desde que surgiu o CSS<\/strong>, o desenvolvimento web nunca mais foi o mesmo. Separando o c\u00f3digo que define o estilo da p\u00e1gina totalmente do HTML<\/strong>, o CSS evoluiu muito desde o seu surgimento e traz cada vez novos recursos para auxiliar o trabalho do desenvolvedor.<\/span><\/p>\n

\u00a0 \u00a0No post de hoje, vamos falar sobre como aplicar !important em CSS. Confira!<\/strong><\/span><\/h2>\n

\"N\u00e3o<\/a><\/p>\n

\u00a0 \u00a0Efeito cascata<\/span><\/span><\/strong><\/h2>\n

Um dos princ\u00edpios b\u00e1sicos da linguagem \u00e9 decidir qual regra CSS a ser aplicada em caso de conflito, como no exemplo abaixo:<\/span><\/p>\n

#elemento1 {<\/span>
\ncolor: black;<\/span>
\n}<\/span>
\n# elemento1 {<\/span>
\ncolor: blue;<\/span>
\n}<\/span><\/p>\n

No exemplo acima o conte\u00fado do texto dentro do elemento de id elemento1 ser\u00e1 azul, pois a prioridade padr\u00e3o do css sempre considera a regra que vem por \u00faltimo. Agora utilizando o mesmo exemplo acima com uma pequena altera\u00e7\u00e3o:<\/span><\/p>\n

#elemento1 {<\/span>
\ncolor: black !important;<\/span>
\n}<\/span>
\n# elemento1 {<\/span>
\ncolor: blue;<\/span>
\n}<\/span><\/p>\n

Veja que foi acrescido o !important na frente da regra color: black. Isso faz com que essa regra seja priorizada, n\u00e3o importa em que ordem ela esteja. Em caso de conflito ela \u00e9 considerada. Nesse \u00faltimo exemplo a cor do texto ser\u00e1 preto. Essa regra prevalecer\u00e1 mesmo se for definido outra cor via c\u00f3digo inline no elemento HTML, como abaixo:<\/span><\/p>\n

<span id=\u201delemento1\u201d style=\u201dcolor: red\u201d >Exemplo de texto<\/span><\/span><\/p>\n

\u00a0 \u00a0Quando utilizar o !important?<\/strong><\/span><\/h2>\n

A melhor resposta para essa pergunta \u00e9 nunca. Ou seja n\u00e3o \u00e9 uma boa pr\u00e1tica de desenvolvimento utilizar o !important –\u00a0apenas se for realmente necess\u00e1rio. O ideal \u00e9 desenvolver um c\u00f3digo CSS bem organizado, definindo as regras para os elementos apenas uma vez, o que vai evitar conflitos e consequentemente problemas para manter esses c\u00f3digos futuramente.<\/span><\/p>\n

Utilizar o !important tamb\u00e9m causa o seguinte problema: vamos supor que voc\u00ea trabalha para uma empresa e desenvolveu um c\u00f3digo CSS e colocou o !important para resolver alguns conflitos de regras.<\/span><\/p>\n

Depois de algum tempo voc\u00ea saiu dessa empresa e outro desenvolvedor assume o seu c\u00f3digo. Esse c\u00f3digo CSS \u00e9 grande, e de repente o desenvolvedor est\u00e1 tentando fazer uma altera\u00e7\u00e3o no c\u00f3digo, mas nunca funciona. S\u00f3 depois de muito tempo perdido e muita dor de cabe\u00e7a, 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\u00f3digo !important n\u00e3o fosse usado.<\/span><\/p>\n

\u00a0 \u00a0Exce\u00e7\u00e3o da regra<\/strong><\/span><\/h2>\n

Como toda regra tem exce\u00e7\u00e3o, seguem\u00a0alguns casos em que o !important pode ajudar o desenvolvedor:<\/span><\/p>\n