Uma das melhores maneiras de aprender a codificar sites é examinar os códigos-fonte de outros sites. Essa prática é a forma como muitos profissionais da web aprenderam seu ofício, especialmente nos dias anteriores, havia tantas opções de cursos de web design, livros e sites de treinamento online. Se você tentar essa prática e observar as folhas de estilo em cascata de um site, uma coisa que poderá ver nesse código é uma linha que diz !Important. Este termo altera a prioridade de processamento na folha de estilo.
A cascata de CSS
As folhas de estilo em cascata realmente se espalham , o que significa que são colocadas em uma ordem específica. Em geral, os estilos são aplicados na ordem em que são lidos pelo navegador.
O primeiro estilo é aplicado e, em seguida, o segundo e assim por diante.
Como resultado, se um estilo aparecer no topo de uma folha de estilo e, em seguida, for alterado na parte inferior do documento, a segunda instância desse estilo é aquela aplicada nas instâncias subsequentes, não a primeira.
Basicamente, se dois estilos estão dizendo a mesma coisa (o que significa que eles têm o mesmo nível de especificidade), o último estilo listado será usado.
Por exemplo, vamos imaginar que os seguintes estilos estão contidos em uma folha de estilo.
O texto do parágrafo seria renderizado em preto, embora a primeira propriedade de estilo aplicada seja vermelha. Isso ocorre porque o valor “preto” é listado em segundo lugar.
Como o CSS é lido de cima para baixo, o estilo final é “preto” e, portanto, esse estilo vence.
p { color: red; }
p { color: black; }
Como !Important muda a prioridade
A diretiva !Important afeta a maneira como seu CSS se espalha ao mesmo tempo que segue as regras que você considera mais cruciais e devem ser aplicadas. Uma regra que tem essa diretiva é sempre aplicada, não importa onde essa regra apareça no documento CSS.
Para tornar o texto do parágrafo sempre vermelho, a partir do exemplo anterior, altere o estilo da seguinte maneira:
p { color: red !important; }
p { color: black; }
Agora todo o texto aparecerá em vermelho, embora o valor “preto” seja listado em segundo lugar. A diretiva !Important substitui as regras normais da cascata e dá a esse estilo uma especificidade muito alta.
Se você realmente precisasse que os parágrafos aparecessem em vermelho, esse estilo funcionaria, mas isso não significa que essa seja uma boa prática.
Quando usar !Important
A diretiva !Important é útil quando você está testando e depurando um site. Se você não tiver certeza do motivo pelo qual um estilo não está sendo aplicado e achar que pode ser um conflito de especificidade, adicione a declaração !Important ao seu estilo para ver se isso corrige – e se corrigir, altere a ordem dos seletores e remova o ! diretivas importantes de seu código de produção.
Se você se apoiar demais na declaração !Important para atingir os estilos desejados, acabará tendo uma folha de estilo repleta de estilos importantes.
Você mudará fundamentalmente a maneira como o CSS dessa página é processado.
É uma prática preguiçosa que não é boa do ponto de vista de gerenciamento de longo prazo.
Use !Important para teste ou, em alguns casos, quando for absolutamente necessário substituir um estilo embutido que faz parte de um tema ou estrutura de modelo.
Mesmo nesses casos, use essa abordagem com moderação e, em vez disso, escreva folhas de estilo claras que respeitem a cascata .
Folhas de estilo do usuário
Essa diretiva também foi implementada para ajudar os usuários de páginas da web a lidar com folhas de estilo que dificultam o uso ou a leitura das páginas.
Quando alguém define uma folha de estilo para visualizar páginas da web, essa folha de estilo é substituída pela folha de estilo do autor da página.
Se o usuário marcar um estilo como !Important, esse estilo substituirá a folha de estilo do autor da página da web, mesmo se o autor marcar uma regra como !Important.
Essa hierarquia é útil para usuários que precisam definir estilos de uma determinada maneira. Por exemplo, um leitor com deficiência visual pode precisar aumentar os tamanhos de fonte padrão em todas as páginas da web que usa.
Ao usar sua diretiva !Important com moderação nas páginas que você cria, você acomoda as necessidades exclusivas de seus leitores.
