CSS! Importante: o que é e quando usá-lo
Publicados: 2020-06-27Um dos elementos mais úteis e controversos do CSS é a propriedade ! Important . Todo designer encontrará a tag no código CSS em algum ponto. A verdadeira questão e dilema que surge quando isso acontece é "foi usado corretamente?" Como CSS ! Important é uma ferramenta poderosa, os desenvolvedores e designers precisam estar cientes das melhores práticas ao usá-lo. CSS! Important pode levar a todos os tipos de código espaguete, e isso não é bom para ninguém.
O que é CSS importante?
A propriedade ! Important em CSS indica que qualquer regra à qual ela está anexada tem precedência sobre outras regras. É a principal prioridade para o elemento e seletor com o qual é usado e, portanto, permite que os desenvolvedores e designers tenham controle específico sobre o estilo de partes individuais do site. Na maioria dos casos, isso significa substituir o estilo padrão do site que está contido em styles.css ou custom.css .
Cada instância de! Important aplica-se apenas à linha específica em que aparece . Portanto, você pode usar a propriedade em algumas, mas não em todas as partes de um snippet. O código CSS para ! Important tem a seguinte aparência:
.example-class {
color:#fff!important;
}
A principal coisa a lembrar com ! Important é dupla:
- a palavra importante deve sempre ser precedida por um ponto de exclamação (!)
- o ponto e vírgula deve estar sempre no final da linha, após a declaração! important
! important pode até ser usado página por página ou módulo por módulo (no caso de criadores de páginas como Divi), se você quiser - embora seja assim que você entra no código espaguete do que está substituindo qual elemento em qual página e em qual ordem?
Todo designer, em algum ponto ou outro, encontrará a tag importante do CSS e terá que tomar uma decisão. Vale a pena substituir o estilo padrão do site?
Às vezes, a resposta é um sonoro sim. Outras vezes, é um não rápido e difícil. Vejamos algumas das melhores práticas com CSS, importantes para saber quando provavelmente não vai quebrar nada, agora ou no futuro.
Quando usar CSS importante
O uso principal (e mais amplamente aceito) de ! Important é quando você deseja que uma classe que interage com um seletor principal tenha um estilo diferente. Talvez você queira que o título do título e as metainformações em seus blogs tenham fontes e cores diferentes das do resto do site. O estilo padrão para esses elementos é herdado dos seletores h1 e p em seus arquivos CSS. Tudo o que você definiu para os padrões do site em seus arquivos .css ou no personalizador de tema do WordPress será exibido.
p {
font-weight: 400;
font-size: 1.1rem;
line-height: 1.7;
color: #111;
font-family:'Roboto';
}
h1 {
margin-top: 30px;
margin-bottom: 15px;
color: #000;
font-family:'Lato';
}
Você pode alterar os elementos individuais que deseja (título da postagem no blog e meta informações) com as classes. entry-title e .post-meta. E como você deseja que eles ainda herdem alguns dos estilos do pai h1 e p , você usará h1.entry-title e p.post-meta para chamá-los especificamente.
h1.entry-title, p.post-meta {
color: white!important;
font-family:'Poppins'!important;
}
Ter esses trechos na mesma folha de estilo fará com que o código principal entre em vigor em todos os casos, exceto quando os títulos da postagem e o Meta da postagem forem exibidos. A propriedade importante do CSS substitui o padrão e permite que você tenha um controle preciso sobre ele.
Esse tipo de personalização individual é o uso principal de ! Important . Mas não o único.
Use CSS importante para proteger classes, IDs e elementos
Você também pode usar ! Important para preparar vários elementos de sua página para o futuro, pois o desenvolvimento posterior do site pode afetar de maneiras inesperadas. Você poderia, por exemplo, desenvolver um estilo particular para caixas de inscrição ou opt-ins por e-mail ou incorporações do YouTube. Cada um deles pode herdar estilos diferentes de suas folhas de estilo em lugares diferentes. Usar a tag ! Important pode fazer com que seja necessária uma mão deliberada para alterar o estilo de seus formulários ou botões.
Basta nomear o elemento com uma classe ou ID e, em seguida, colocar ! Important em cada linha.
.youtube-embed {
font-family:'Exo'!important;
font-weight: 700!important;
line-height:1.4rem!important;
margin-top:25px!important;
margin-left:auto!important;
margin-right:auto!important
color:#449928!important;
padding:11px!important;
background:#998899;
}
Voila! Preparado para o futuro a partir de mudanças regulares em suas folhas de estilo.
Usando estilos embutidos
Este é um daqueles casos de uso que podem ou não surgir para muitas pessoas. Costumava ser muito comum, mas se tornou menos comum à medida que deixamos de codificar manualmente nossas postagens e páginas. No entanto, se você entrar no HTML de um bloco de Gutenberg ou na visualização de texto do editor clássico do WordPress, poderá usar ! Important com estilo CSS in-line.
<div class="special-paragraph" style="color:#blue!important;"> <p>This text will show up blue now!</p> </div>
Isso é importante por alguns motivos. A primeira é que você pode controlar qualquer linha de código em sua página usando, especificamente, style = ”x: y! Important;” e a segunda é que você pode substituir qualquer CSS já aplicado a essa página. Mesmo que esse valor também seja importante . Por exemplo:
<style>
p {
color:#313373!important;
font-size:2rem;
}
</style>
<div class="special-paragraph" style="color:#blue!important;">
<p>This text will show up blue now, even though there's another !important tag
applied to the paragraph selector on this page!</p>
</div>
Mesmo se houver um estilo HTML embutido usando <style> </style> que usa ! Important no mesmo seletor, o CSS in-line que visa o parágrafo específico será aquele que renderizar.
Cuidado com o empilhamento de tags importantes
Vamos pegar esses dois últimos exemplos e emitir uma palavra de cautela. Esses tipos de uso são aceitáveis em pequenas doses. Você pode usá-los em situações únicas e provavelmente ninguém terá problemas com isso. Porque, como único, você usou especificamente ! Important para estilizar um elemento individual. É para isso que se destina .
No entanto, se você começar a usar ! Important como uma muleta, como uma forma de evitar a edição de suas folhas de estilo com tanta frequência ou como uma solução rápida para vários problemas no mesmo site, esse é o começo do código espaguete. Especialmente para desenvolvedores futuros que não são você. Embora você possa ter dificuldade em descobrir a ordem em que os s ! Importantes são renderizados, um desenvolvedor futuro pode achar isso impossível.
O que acontece eventualmente é que há tantos arquivos importantes empilhados no site que interagem com várias folhas de estilo, páginas e módulos, que o CSS normal raramente renderiza. E às vezes, mesmo algo sinalizado ! Important não é renderizado. Ou pior, todas as alterações posteriores têm de ser sinalizadas ! Importante apenas para que apareçam, a menos que você queira derrubar o estilo do site e criá-lo novamente.
Empacotando
CSS importante é, honestamente, uma das ferramentas mais poderosas no kit de ferramentas de um designer. Você pode ajustar facilmente qualquer elemento em seu site sem se preocupar em afetar quaisquer subordinados ou colegas. Mas se você abusar dele, os efeitos podem cair em um pesadelo de páginas e elementos tentando se sobrepor, e o que antes era importante tornou-se o padrão, mas não pode ser definido como padrão. Portanto, tente usar ! Important com moderação, de modo que, quando precisar de algo para se destacar ou ser preparado para o futuro, você esteja fazendo isso da maneira certa.
O que você acha de usar CSS! Importante em seus projetos?
Imagem de destaque do artigo por wan wei / shutterstock.com