Postado dia

E ae pessoas! Hoje vou falar um pouco sobre especifidade no CSS, mas por um bom motivo. Quando digo “especificidade” no CSS, estou falando das propriedades de maior relevância para um elemento no HTML, e tem algo que influencia isso: o !important.

CSS significa Cascade Style Sheet, traduzindo, Folha de Estilo em Cascata. Ele tem esse nome porquê tudo o que vier escrito em um arquivo CSS será lido de cima para baixo, ou seja, se um elemento é indicado mais de uma vez no CSS, a última declaração será a considerada para o elemento.

Mas aí entra algumas coisas que podem influenciar se uma declaração será considerada ou não. Primeiramente, temos o pseudo-seletor :not(), que aplica uma regra de exceção ao elemento. Considero ele bem simples, dá fácil leitura ao arquivo, e permite um controle mais decente.

Porém tem um outro que precisa ter um certo cuidado quando for usá-lo: o !important. E o que é este cara? Simples, um elemento que recebe um !important após o valor de uma propriedade aplicada a ele passa a ganhar alta prioridade na hora do CSS escolher a declaração mais importante.

Muitos vão olhar para isso e dizer: “meu deus, então fechou, se tiver problemas de propriedades não sendo lidas quando deveriam serem lidas, vou usar esse !important”. E olha, eu pensei assim por um bom tempo, e só depois que eu percebi o quão errado eu estava.

Imagine o caos

Imagina a seguinte situação: você cria seu site e define toda a formatação de texto, mas aí mais para frente, você precisa definir que algumas <div> específicas tenham a cor vermelha. Aí você cria uma classe para tais parágrafos e define o CSS:

div.aviso{color: #F00;}

Aí você vai testar seu site, e seu elemento está cinza, pois provavelmente você definiu a cor cinza para todos os <div> do seu site em algum momento, mas não se lembra quando. Então, você que imagino estar com preguiça de olhar todo o seu arquivo CSS ou você está correndo com o site pois o cliente deu um prazo curto para fazer o site (e vai saber por que você aceitou isso), vai na propriedade e faz o seguinte:

div.aviso{color: #F00 !important;}

Então você testa seu site e a cor dos textos ficam vermelhas. Legal. Então, quando você já está terminando seu site, você precisa que outro elemento que usa a classe “aviso” tenha uma cor amarela. Então você vai no seu CSS e define:

div.aviso{color: #FF0;}

Mas como você está a um tempo na criação deste site, você pode ter esquecido que a classe “aviso” foi usada antes e, mais uma vez por preguiça ou pressa, coloca o !important nesta linha. Legal, o elemento ficou amarelo, mas aí você testa seu site todo e algumas partes aonde estavam vermelho passaram a ficar amarelo. Que legal… Aí você vai olhar seu arquivo, e ele tem centenas de linhas CSS… Ai ai…

CAOS!!!!

É amigo, e se você fez muito disso em seus CSS, acho que você está precisando de um rehab.

Comigo, eu aprendi com meus erros quando tive que mexer em uma estrutura feita por outra pessoa, e nela eu tinha que aplicar novos CSS, mas como eu não tenho paciência em mexer em templates prontos pois tenho meu estilo de programar e de se organizar, eu acabei aplicando !important pra caramba. E foi caótico, eu mexia em algo, outra coisa parava de funcionar. O desespero batia forte!

Ok, ok, como evitar o uso excessivo de !important?

Primeiramente, usar o !important requer ser organizado com o seu arquivo CSS. Usar !important demais vai causar um caos no seu site e você não vai mais saber o que está sendo priorizado pelo CSS, então quando for olhar seu arquivo CSS, você vai soltar um belo de um “FU***!”.

Segundo, o CSS oferece vários pseudo-seletores, como o :not() que eu já citei. Também oferece alguns valores que funcionam como variáveis, como o valor currentColor que puxa a última cor utiliza na propriedade “color” mais próximo na hierarquia. Além de funções como o calc(), de usar algumas propriedades de forma não aninhada para que elas possam ser manipuladas quando necessárias, entre outros. Saber usá-los ajudam a organizar seu CSS, diminuindo as possibilidades de se usar o !important.

Olha, não estou propagando que você jamais deve usar o !important. Você pode usá-lo sim, mas tem que usar com moderação, ok?

Então pensa em manter tudo organizado quando for escrever seu CSS. Uma ideia boa é usar comentários para seccionar seu arquivo e também indicar o que um grupo de linhas está fazendo ali.

É isso, que essas dicas te ajudem de alguma forma. 😉

Tags: ,

Manda sua palavra ae! Deixe um comentário: