Qu’est-ce que « CSS Important » ?

La propriété! Important en CSS indique que la règle à laquelle elle est attachée a priorité sur les autres règles.
C’est la priorité absolue de l’élément et du sélecteur avec lesquels il est utilisé, et permet donc aux développeurs et aux concepteurs d’avoir un contrôle spécifique sur le style des différentes parties du site. Dans la plupart des cas, cela signifie remplacer le style par défaut du site contenu dans styles.css ou custom.css.

Chaque instance de ! Important s’applique uniquement à la ligne spécifique sur laquelle elle apparaît.
Vous pouvez donc utiliser la propriété sur certaines parties d’un extrait de code, mais pas sur toutes. Le code CSS de! Important ressemble à ceci:

01 02 03

.example-class { color:#fff!important; }

La première chose à retenir avec! Important est double:

1. le mot important doit toujours être précédé d’un point d’exclamation (!)
2. le point-virgule doit toujours être à la fin de la ligne, après la déclaration ! important

   ! important peut même être utilisé page par page ou module par module (dans le cas de constructeurs de pages comme Divi), si vous le souhaitez – mais c’est ainsi que vous entrez dans le code spaghetti de ce qui remplace quel élément quelle page et dans quel ordre?

Chaque concepteur à un moment ou à un autre parcourra la balise CSS importante et devra prendre une décision. Cela vaut-il la peine de remplacer le style par défaut du site?

Parfois, la réponse est un oui retentissant. D’autres fois, c’est un non dur et rapide. Examinons quelques bonnes pratiques avec CSS importantes pour savoir quand il ne cassera probablement rien, ni maintenant ni à l’avenir.

Quand utiliser CSS Important

L’utilisation principale (et la plus largement acceptée) de! Important est lorsque vous voulez qu’une classe qui interagit avec un sélecteur principal soit stylée différemment. Peut-être que vous voulez que l’en-tête du titre et les métadonnées sur vos blogs soient d’une police et d’une couleur différentes de celles du reste de votre site. Le style par défaut de ces éléments est hérité des sélecteurs h1 et p de vos fichiers CSS. Tout ce que vous avez défini pour les valeurs par défaut du site dans vos fichiers .css ou le personnalisateur de thème WordPress s’affichera.

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';

}

01 02 03 04

h1.entry-title, p.post-meta { color: white!important; font-family:'Poppins'!important; }

Le fait d’avoir ces extraits dans la même feuille de style fera que le code supérieur prendra effet dans tous les cas, sauf lorsque les titres de publication et la méta-publication sont affichés. La propriété CSS CSS remplace la valeur par défaut et vous permet d’avoir un contrôle précis sur celle-ci.

Ce type de personnalisation individuelle est l’utilisation principale de! Important. Mais pas le seul.

Utiliser CSS Important pour protéger les classes, les ID et les éléments

Vous pouvez également utiliser! Important pour pérenniser divers éléments de votre page, également, que le développement ultérieur sur le site pourrait modifier de manière inattendue. Vous pouvez, par exemple, développer un style particulier pour les boîtes d’abonnement ou les opt-ins par e-mail ou les intégrations YouTube. Chacun de ces éléments peut hériter de styles différents de vos feuilles de style à différents endroits. L’utilisation de la balise! Important peut faire en sorte qu’il soit délibérément nécessaire de modifier le style de vos formulaires ou boutons.

Nommez simplement l’élément avec une classe ou un ID, puis mettez! Important sur chaque ligne.

01 02 03 04 05 06 07 08 09 10 11

.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! À l’épreuve du temps grâce aux changements réguliers de vos feuilles de style.

Utilisation de styles en ligne

C’est l’un de ces cas d’utilisation qui peuvent ou non se présenter pour de nombreuses personnes. Auparavant, il était très courant, mais il l’est moins à mesure que nous nous éloignons du codage manuel de nos publications et de nos pages. Cependant, si jamais vous creusez dans le code HTML d’un bloc Gutenberg ou la vue texte de l’éditeur classique WordPress, vous pouvez absolument utiliser! Important avec le style CSS en ligne.

01 02 03

<div class="special-paragraph" style="color:#blue!important;"> <p>This text will show up blue now!</p> </div>

Ceci est important pour plusieurs raisons. Le premier étant que vous pouvez contrôler n’importe quelle ligne de code dans votre page en utilisant spécifiquement style = ”x: y! Important;” et le second est que vous pouvez remplacer tout CSS déjà appliqué à cette page. Même si cette valeur a aussi son importance. Par exemple:

<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>