Website: CSS! Important , c’est quoi et quand l’utiliser ?

par | Juil 1, 2020 | News, Site internet, Tous les articles RSS | 0 commentaires

L’un des éléments les plus utiles et les plus controversés de CSS est la propriété!

Chaque concepteur rencontrera la balise dans le code CSS à un moment donné. La vraie question et le vrai dilemme qui se posent lorsque cela se produit sont «a-t-il été utilisé correctement?»
Étant donné que <CSS! Important> est un outil si puissant, les développeurs et les concepteurs doivent connaître les meilleures pratiques lors de son utilisation.
<CSS! Important> peut conduire à toutes sortes de code spaghetti, et ce n’est bon pour personne.

 

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';
}
Vous pouvez modifier les éléments individuels que vous souhaitez (titre de l’article de blog et méta-informations) avec les classes .entry-title et .post-meta. Et comme vous voulez qu’ils héritent toujours de certains styles des parents h1 et p, vous utiliserez h1.entry-title et p.post-meta pour les appeler spécifiquement.
 
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>
Même s’il existe un style HTML intégré utilisant <style> </style> qui utilise! Important sur le même sélecteur, le CSS en ligne qui cible le paragraphe spécifique sera celui qui s’affiche.
 

Méfiez-vous d’empiler des balises importantes

Prenons ces deux derniers exemples et mettons en garde. Ces types d’utilisations sont très bien à petites doses. Vous pouvez les utiliser des situations ponctuelles, et personne n’aura probablement jamais de problème avec cela. Parce que, en tant que pièce unique, vous avez spécifiquement utilisé! Important pour styliser un élément individuel. C’est à cela qu’il est destiné.

Cependant, si vous commencez à utiliser! Important comme béquille, comme un moyen d’éviter de modifier vos feuilles de style aussi souvent ou comme une solution rapide pour plusieurs problèmes sur le même site, c’est le début du code spaghetti. Surtout pour les futurs développeurs qui ne sont pas vous. Bien que vous ayez du mal à déterminer l’ordre dans lequel les! Importants s’affichent, un futur développeur peut trouver cela impossible.

Ce qui se passe finalement, c’est qu’il y a tellement d’empilés! Importants sur le site qui interagissent avec plusieurs feuilles de style, pages et modules, que le CSS normal rend rarement. Et parfois, même un élément signalé! Important ne s’affiche pas. Ou pire, chaque changement doit être signalé par la suite! Important juste pour qu’il apparaisse, à moins que vous ne vouliez démolir le style du site et le reconstruire.

« CSS important » est honnêtement l’un des outils les plus puissants de la boîte à outils d’un concepteur. Vous pouvez facilement ajuster n’importe quel élément de votre site sans craindre d’affecter des subordonnés ou des pairs. Mais si vous en abusez, les effets peuvent se transformer en un cauchemar de pages et d’éléments essayant de se remplacer les uns les autres, et ce qui était autrefois important est devenu la valeur par défaut, mais il ne peut pas être défini comme valeur par défaut. Essayez donc d’utiliser! Important avec parcimonie, de sorte que lorsque vous avez besoin de quelque chose pour vous démarquer ou être à l’épreuve du temps, vous le faites de la bonne façon.

Notre Blog

Comment aller de la bonne façon en direct sur Facebook

Comment aller de la bonne façon en direct sur Facebook

La vidéo en direct est de plus en plus priorisée par presque tous les réseaux sociaux. Mais spécifiquement Facebook. Le géant social rend la mise en ligne incroyablement simple, surtout si vous utilisez l'une de ses nombreuses applications mobiles (y compris...

Comment utiliser OBS Studio pour faire du Livestream

Comment utiliser OBS Studio pour faire du Livestream

La vidéo en direct n'a jamais été aussi accessible. Le public est de plus en plus habitué à regarder des flux francs de leurs marques et créateurs de contenu préférés. Cela fait monter la pression pour fournir une interaction, un divertissement et des...

Let's Work Together!

N’hésitez-pas, contactez-nous pour une demande de renseignement ou une explication sur nos services

La qualité et le référencement ne se copie pas !