CSS !Important : Qu'est-ce que c'est et quand l'utiliser
Publié: 2020-06-27L'un des éléments les plus utiles et controversés de CSS est la propriété !important . Chaque concepteur rencontrera la balise dans le code CSS à un moment donné. La vraie question et le vrai dilemme qui se pose lorsque cela se produit est « a-t-il été utilisé correctement ? » Parce que CSS !important est un outil si puissant, les développeurs et les concepteurs doivent être conscients des meilleures pratiques lorsqu'ils l'utilisent. 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 dans CSS indique que la règle à laquelle elle est attachée a préséance sur les autres règles. Il s'agit de la priorité absolue pour l'élément et le 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 ne s'applique qu'à la ligne spécifique sur laquelle elle apparaît . Vous pouvez donc utiliser la propriété sur certaines parties d'un extrait, mais pas toutes. Le code CSS pour !important ressemble à ceci :
.example-class {
color:#fff!important;
}
La principale chose à retenir avec !important est double :
- le mot important doit toujours être précédé d'un point d'exclamation (!)
- le point-virgule doit toujours être en fin de ligne, après la déclaration !important
!important peut même être utilisé page par page ou module par module (dans le cas des constructeurs de pages comme Divi), si vous le souhaitez - bien que c'est ainsi que vous entrez dans le code spaghetti de ce qui remplace quel élément sur quelle page et dans quel ordre ?
Chaque concepteur à un moment ou à un autre rencontrera 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 catégorique. D'autres fois, c'est un non dur et rapide. Examinons quelques meilleures pratiques avec CSS importantes pour savoir quand cela ne cassera probablement rien, que ce soit maintenant ou dans le futur.
Quand utiliser CSS Important
L'utilisation principale (et la plus largement acceptée) de !important est lorsque vous souhaitez qu'une classe qui interagit avec un sélecteur principal soit stylisée différemment. Peut-être que vous voulez que le titre et les méta-informations de 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 dans 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 . titre d'entrée et .post-meta. Et puisque vous voulez qu'ils héritent toujours de certains des styles des parents h1 et p , vous utiliserez h1.entry-title et p.post-meta pour les appeler spécifiquement.
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 entraînera l'effet du code supérieur dans tous les cas, sauf lorsque les titres des articles et les métadonnées des articles sont affichés. La propriété CSS important remplace la valeur par défaut et vous permet de la contrôler avec précision.
Ce type de personnalisation individuelle est la principale utilisation de !important . Mais pas le seul.
Utiliser CSS Important pour protéger les classes, les identifiants et les éléments
Vous pouvez également utiliser !important pour pérenniser divers éléments de votre page, que le développement ultérieur du site pourrait modifier de manière inattendue. Vous pouvez, par exemple, développer un style particulier pour les boîtes d'abonnement, les inscriptions par e-mail ou les intégrations YouTube. Chacun d'entre eux 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 faille délibérément modifier le style de vos formulaires ou de vos boutons.
Il suffit de nommer l'élément avec une classe ou un ID, puis de mettre !important sur chaque ligne.
.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 des changements réguliers de vos feuilles de style.
Utilisation des styles en ligne
C'est l'un de ces cas d'utilisation qui peuvent ou non se présenter pour de nombreuses personnes. Auparavant, c'était très courant, mais c'est devenu moins le cas depuis que nous nous sommes éloignés du codage manuel de nos publications et de nos pages. Cependant, si jamais vous creusez dans le HTML d'un bloc Gutenberg ou dans la vue texte de l'éditeur classique de WordPress, vous pouvez absolument utiliser !important avec un style CSS en ligne.
<div class="special-paragraph" style="color:#blue!important;"> <p>This text will show up blue now!</p> </div>
Ceci est important pour plusieurs raisons. La première étant que vous pouvez contrôler spécifiquement n'importe quelle ligne de code de votre page en utilisant style="x:y!important;" et la seconde est que vous pouvez remplacer tout CSS déjà appliqué à cette page. Même si cette valeur a aussi !important . 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'affichera.
Attention à l'empilement de balises importantes
Prenons ces deux derniers exemples et émettons un mot d'avertissement. Ces types d'utilisations sont très bien à petites doses. Vous pouvez les utiliser dans des situations ponctuelles, et personne n'aura probablement jamais de problème avec cela. Parce que, à titre ponctuel, 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 moyen d'éviter de modifier vos feuilles de style aussi souvent ou comme 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 peut-être 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 de !importants empilés sur le site qui interagissent avec plusieurs feuilles de style, pages et modules, que le CSS normal rend rarement. Et parfois, même quelque chose signalé !important ne s'affiche pas. Ou pire, chaque changement par la suite doit être signalé !important juste pour qu'il apparaisse, à moins que vous ne vouliez démolir le style du site et le reconstruire.
Emballer
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 vous soucier d'affecter vos subordonnés ou vos pairs. Mais si vous en abusez, les effets peuvent se transformer en un cauchemar de pages et d'éléments essayant de se remplacer, et ce qui était autrefois important est devenu la valeur par défaut, mais il ne peut pas être défini par défaut. Essayez donc d'utiliser !important avec parcimonie, de sorte que lorsque vous avez besoin de quelque chose pour se démarquer ou être à l'épreuve du temps, vous le faites de la bonne manière.
Que pensez-vous de l'utilisation de CSS !important dans vos projets ?
Article présenté en image par wan wei / shutterstock.com