Uma das melhores maneiras de aprender como codificar sites é examinar os códigos-fonte de outros sites. Essa prática é como muitos profissionais da Web aprenderam seu ofício, especialmente nos dias anteriores a tantas opções de cursos de web design, livros e sites de treinamento on-line.
Se você tentar essa prática e examinar as folhas de estilo em cascata (CSS) de um site, uma coisa que você pode ver nesse código é uma linha que diz "importante". O que isso significa e, tão importante quanto, como você usa corretamente essa declaração em suas folhas de estilo?
A cascata de CSS
Primeiro de tudo, é importante entender que folhas de estilo em cascata realmente cascata , o que significa que eles são colocados em uma ordem específica. Em geral, isso significa que os estilos são aplicados na ordem em que são lidos pelo navegador. O primeiro estilo é aplicado e depois o segundo e assim por diante.
Como resultado, se um estilo aparecer na parte superior de uma folha de estilos e for alterado para baixo no documento, a segunda instância desse estilo será a aplicada nas instâncias subsequentes, não na 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 listado será usado.
Por exemplo, vamos imaginar que os estilos a seguir estivessem contidos em uma folha de estilo. O texto do parágrafo seria renderizado em preto, mesmo que a primeira propriedade de estilo aplicada seja vermelha. Isso ocorre porque o valor "preto" é listado em segundo. Como o CSS é lido de cima para baixo, o estilo final é "preto" e, portanto, esse ganha.
p {cor: vermelho; }p {cor: preto; }
Como importante muda a prioridade
Agora que você entende como essas regras quase idênticas são processadas pelo CSS, podemos ver como a importante diretiva muda um pouco as coisas.
A importante diretiva afeta a maneira como o CSS é executado em cascata, seguindo as regras que você considera mais cruciais e que devem ser aplicadas. Uma regra que tenha a diretiva importante sempre é aplicada, não importa onde essa regra apareça no documento CSS.
Para tornar o texto do parágrafo sempre vermelho, do exemplo acima, você usará:
p {cor: vermelho! importante; }p {cor: preto; }
Agora todo o texto aparecerá em vermelho, mesmo que o valor "preto" seja listado em segundo. A diretiva importante sobrepõe-se às regras normais da cascata e dá a esse estilo uma especificidade muito alta.
Se você absolutamente precisasse que os parágrafos parecessem vermelhos, esse estilo faria isso, mas isso não significa que essa seja uma boa prática. Vamos ver em seguida quando você pode querer usar! Importante e quando não for apropriado.
Quando usar! Importante
A importante diretiva é muito útil quando você está testando e depurando um site. Se você não tem certeza do motivo pelo qual um estilo não está sendo aplicado e acha que pode ser um problema de especificidade, você pode adicionar a declaração! Importante ao seu estilo para ver se isso o corrige.
Se adicionar! Importante realmente corrige o problema de estilo, você acabou de determinar que é um problema de especificidade. No entanto, você não quer deixar esse código importante no lugar, ele só foi colocado lá para fins de teste.
Como o teste está concluído, você deve remover essa diretiva e ajustar seu seletor para obter a especificidade necessária para que seu estilo funcione. ! importante não deve entrar em seus locais de produção, em parte por causa de como muda a cascata normal.
Se você se inclinar demais na declaração importante para alcançar os estilos desejados, você acabará tendo uma folha de estilo repleta de estilos importantes. Você estará mudando fundamentalmente o modo como o CSS da página é processado. É uma prática preguiçosa que não é boa do ponto de vista da gestão a longo prazo.
Use! Importante para testes ou, em alguns casos, quando você absolutamente precisa substituir um estilo in-line que faz parte de uma estrutura de tema ou modelo. Mesmo nesses casos, use essa abordagem com o mínimo de parcimônia possível e, em vez disso, esforce-se para escrever folhas de estilo limpas que entendam a cascata.
Folhas de estilo do usuário
Há uma nota final sobre a importante diretiva que é essencial para entender. Essa diretiva também foi implementada para ajudar os usuários de páginas da Web a lidarem com folhas de estilo que dificultam o uso ou a leitura das páginas.
Normalmente, se um usuário definir uma folha de estilos para exibir páginas da Web, essa folha de estilo será substituída pela folha de estilo do autor da página da Web. Se o usuário marcar um estilo como importante, esse estilo anulará a folha de estilos do autor da página da Web, mesmo que o autor marque uma regra como importante.
Isso é útil para usuários que precisam definir estilos de uma determinada maneira. Por exemplo, alguém pode precisar aumentar os tamanhos de fonte padrão em todas as páginas da web que eles usam. Ao usar sua importante diretiva com moderação nas páginas que você cria, você pode atender a quaisquer necessidades especiais que seus usuários possam ter.
