Então, quando ainda é possível usar!

Qualquer característica nas mãos "tortas" fica ruim. O importador não é exceção. O ruim não é o que ele sabe, mas a maneira como ele é usado.

Como funciona!

Em CSS, usamos o mecanismo de especificidade para priorizar estilos. Escrevemos cascatas ou seletores complexos, aumentamos o peso do seletor, indicando ao navegador a prioridade de alguns estilos em detrimento de outros.

Por exemplo:

.content .title { color: red; } .title { color: blue; } 

Nesse caso, apesar de a cor azul ser aplicada ao cabeçalho depois do vermelho, como resultado, obteremos um cabeçalho vermelho. Como o primeiro seletor é mais específico (se de repente você não estiver familiarizado com isso, não leia mais - só vai piorar, é melhor aqui e aprender especificidade).

Então, usando o mesmo exemplo, mas com! Importante, descobrimos de repente que ele não se importa com sua especificidade.

 .content .title { color: red; } .title { color: blue !important; } 

O título será azul! Essa propriedade viola o fluxo natural das regras que escrevemos e atribui aos estilos de menor prioridade a maior prioridade.

Bem, no entanto, como "cuspir" ... Na verdade não, e cuspir. Vamos adicionar outro importador.

 .content .title { color: red !important; } .title { color: blue !important; } 

E a manchete está vermelha novamente. Porque temos dois conflitos importantes, e esse conflito é resolvido através da comparação dos pesos dos seletores.

Um importador é ruim quando é:

 .title { color: red; } 

“Hmm, eu escrevi em vermelho, por que minha manchete não é vermelha? E se sim?

 .title { color: red !important; } 

“Ótimo! Vermelho! ” Mas é realmente bom?

Essa abordagem é ruim, pelo menos porque você redefine os estilos sem entender por que eles não foram aplicados sem um importador. Provavelmente, o peso do seletor usado acabou sendo insuficiente e, escrevendo um seletor um pouco mais preciso e "pesado", você resolveria o problema e redefiniria rigidamente os estilos, e é bom se você conhecer e verificar todos os lugares em que essa classe foi usada, mas se não for, você subordinou o elemento em um lugar e provavelmente quebrou em outro.

Ferramenta para hotfix

Muitas vezes, quando faço uma pergunta a alguém sobre importadores, ouço uma resposta no estilo de: "Uso importante quando preciso resolver rapidamente o problema e não tenho tempo para entender o código que não escrevi e que está muito mal escrito" .

Sim, mas apenas as tarefas são sempre "urgentes"; geralmente, essas tarefas nunca terminam, portanto, deixe-o. Você mesmo não percebeu como piorou ainda mais o "código alienígena ruim".

O que significa fast? É tão difícil e demorado descobrir o peso necessário do seletor para redefinição? Estamos usando ativamente o DevTools no desenvolvimento e temos a resposta para resolver esse problema.

Inspecionamos o elemento que queremos mudar. Sua cor atual é preta. Examinamos a que seletor essa cor foi atribuída?



Usamos o mesmo seletor para atribuir uma nova cor ou aumentar o peso, e o ponto está no chapéu, não importa quão difícil seja esse seletor.



Isso é longo? Parece-me que isso difere pouco no tempo da escrita! Importante, mas é muito mais correto e seguro.

Soluções de terceiros e código de outra pessoa

A segunda resposta mais popular à pergunta sobre a necessidade de usar importadores: "Eu uso! Importante ao redefinir os estilos de bibliotecas e plug-ins de terceiros ou CMS-ok" .

Essa resposta está um pouco mais próxima da verdade, mas apenas se for formulada com um pouco mais de precisão. É dessa forma que está incorreta, porque os estilos de arquivos de terceiros podem ser substituídos da mesma maneira que os seus, apenas adicionando-os após conectar os estilos de outras pessoas e aumentar o peso do seletor.

No entanto, em alguns casos, essa resposta "entra" na pergunta. Por exemplo, se você conectou um controle deslizante à sua página, que é implementado para que, ao alternar o slide, o JavaScript substitua os valores de algumas propriedades no CSS.



E, por algum motivo, você precisa substituir essas propriedades, ignorando as alterações no próprio plugin.

JS só pode reatribuir valores de propriedade usando estilos embutidos. Ou seja, quaisquer propriedades alteradas para um elemento usando JavaScript serão simplesmente gravadas no atributo style. Do ponto de vista do mecanismo de especificidade, esses estilos são mais prioritários e, não importa como você aumente o peso do seletor, você não poderá substituí-los.

Este é precisamente o primeiro caso em que simplesmente não podemos prescindir de algo importante.
Se precisarmos redefinir os estilos embutidos, apenas importante nos ajudará.
A prioridade dos estilos com um importador é maior que a prioridade dos estilos embutidos, e se por algum motivo você precisar reescrever estilos embutidos, não terá outra opção a não ser usar! Importante.

Importante para o bem

Vamos considerar mais um caso, que às vezes é usado no código de várias bibliotecas e plugins.

Se você abrir o código-fonte CSS da biblioteca Bootstrap, verá que os desenvolvedores da biblioteca frequentemente recorrem ao uso de importadores. Talvez eles também precisassem consertar rapidamente e o fizeram (sarcasmo), mas em geral há uma explicação mais adequada. Nesse caso, s importantes são usados ​​"para sempre". Dessa maneira, os desenvolvedores do Bootstrap “protegem” seu código.

O fato é que, ao conectar esta biblioteca ao seu site, você pode redefinir seus estilos originais. Assim, os desenvolvedores são ressegurados e a quebra do comportamento de seu código será mais difícil se você não souber como a especificidade funciona. Mas se você entender como o mecanismo de especificidade do CSS funciona, poderá redefinir o importador escrevendo seus estilos com o importador também, mas com um seletor mais "pesado".

Assim, chegamos ao segundo caso em que é impossível sem importador.
Se você precisar substituir importantes (a sua ou de uma biblioteca de terceiros), apenas o! Important o ajudará.

É por isso que é incorreto dizer: “Uso importadores quando preciso redefinir os estilos de bibliotecas de terceiros”, seria mais correto dizer: “Uso importadores quando preciso redefinir estilos embutidos ou outros! Importante”. E não importa de onde vêm esses estilos: dos seus arquivos ou de terceiros.

Ajudantes

De fato, no parágrafo anterior, todos os casos são descritos quando o uso de importadores será normal e correto. São casos em que o uso de importadores será inevitável. Mas ainda existem casos em que o uso de importadores será permitido, embora talvez já não seja inteiramente apropriado.

Às vezes, precisamos de classes universais auxiliares que usamos em nosso código com o objetivo de reutilizar o código e alguma simplificação.
Por exemplo, criamos algum tipo de classe .warning, que aplicaremos a vários elementos da página, indicando sua importância.

 .warning { color: red; } 

E queremos que, ao aplicar essa classe a qualquer elemento, definitivamente tornaremos o texto nesse elemento vermelho. Mas um elemento pode ter estilos de prioridade mais alta gravados usando um seletor mais preciso e, em seguida, nossa cor da classe .warning será alterada. Nesse caso, ao adicionar importantes à nossa classe auxiliar, a tornamos mais universal, porque a cor usada nessa classe será mais prioritária. No entanto, não posso dizer que seja bom. Afinal, isso torna os estilos de classe mais prioritários, mas ainda não garante cem por cento de trabalho, pois esse ajudante pode encontrar outras coisas importantes e, mesmo assim, tudo dará errado. E então, quando acontece que, em um certo caso, essa classe deve tornar o texto “não tão vermelho”, você imediatamente “dará à luz” um novo seletor com repetição do importador.

Quando ainda é possível

É correto e normal usar! Importante quando você precisa substituir estilos embutidos ou outros! Importante.

Se você seguir esta regra, no layout usual, principalmente se estiver impondo uma página do zero, você não precisará usar um importador até o momento em que começar a conectar soluções de terceiros à sua página, mas mesmo assim acima, não necessariamente leva ao seu uso.

Metodologias modernas como o BEM também ditam suas próprias regras, nas quais o uso de estilos em linha ou importadores será inadequado.

Você não precisa de um importador, não porque ele seja misterioso e terrível, mas simplesmente porque na maioria dos casos você pode ficar sem ele.

Todas as exceções que eu determinei para mim, em regra, se resumem a casos não muito típicos. Por exemplo, talvez você precise usá-lo quando estiver desenvolvendo sua própria biblioteca, plug-in ou extensão de navegador e precisar de um comportamento de prioridade mais alta para estilos específicos. No entanto, isso está longe do uso regular típico.