L'une des meilleures façons d'apprendre à coder des sites Web est de consulter les codes sources d'autres sites. Cette pratique est la façon dont de nombreux professionnels du Web ont appris leur métier, en particulier à l'époque où il y avait tant d'options pour création de sites web des cours, des livres et des sites de formation en ligne.
Si vous essayez cette pratique et regardez les feuilles de style en cascade d'un site, une chose que vous pouvez voir dans ce code est une ligne qui dit !important. Ce terme modifie la priorité du traitement dans la feuille de style.
La cascade de CSS
Les feuilles de style en cascade font en effet Cascade, ce qui signifie qu'ils sont placés dans un ordre particulier. En général, les styles sont appliqués dans l'ordre dans lequel ils sont lus par le navigateur. Le premier style est appliqué, puis le second, et ainsi de suite.
Par conséquent, si un style apparaît en haut d'une feuille de style puis est modifié plus bas dans le document, la deuxième instance de ce style est celle appliquée dans les instances suivantes, pas la première. Fondamentalement, si deux styles disent la même chose (ce qui signifie qu'ils ont le même niveau de spécificité), le dernier de la liste sera utilisé.
Par exemple, imaginons que les styles suivants soient contenus dans une feuille de style. Le texte du paragraphe serait rendu en noir, même si la première propriété de style appliquée est rouge. C'est parce que la valeur "noire" est répertoriée en second. Puisque CSS se lit de haut en bas, le style final est "noir" et donc celui-là l'emporte.
p { couleur: rouge; }
p { couleur: noir; }
Comment !important change la priorité
le !important La directive affecte la façon dont votre CSS cascade tout en suivant les règles que vous jugez les plus cruciales et doivent être appliquées. Une règle qui a cette directive est toujours appliquée, peu importe où cette règle apparaît dans le document CSS.
Pour que le texte du paragraphe soit toujours rouge, à partir de l'exemple précédent, modifiez le style comme suit:
p { couleur: rouge !important; }
p { couleur: noir; }
Désormais, tout le texte apparaîtra en rouge, même si la valeur "noire" apparaît en deuxième position. La directive !important remplace les règles normales de la cascade et donne à ce style une spécificité très élevée.
Si vous aviez absolument besoin que les paragraphes apparaissent en rouge, ce style le ferait, mais cela ne signifie pas que c'est une bonne pratique.
Quand utiliser !important
La directive !important est utile lorsque vous testez et déboguez un site Web. Si vous ne savez pas pourquoi un style n'est pas appliqué et pensez qu'il peut s'agir d'un conflit de spécificité, ajoutez la déclaration !important à votre style pour voir si cela le résout - et si c'est le cas, modifiez l'ordre des sélecteurs et supprimez les directives !important de votre production code.
Si vous vous appuyez trop sur la déclaration !important pour obtenir les styles souhaités, vous finirez par avoir une feuille de style jonchée de styles !important. Vous changerez fondamentalement la façon dont le CSS de cette page est traité. C'est une pratique paresseuse qui n'est pas bonne du point de vue de la gestion à long terme.
Utilisez !important pour les tests ou, dans certains cas, lorsque vous devez absolument remplacer un style en ligne qui fait partie d'un thème ou d'un cadre de modèle. Même dans ces cas, utilisez cette approche avec parcimonie et écrivez plutôt des feuilles de style propres qui honorent les Cascade.
Feuilles de style utilisateur
Cette directive a également été mise en place pour aider les utilisateurs de pages Web à gérer les feuilles de style qui rendent les pages difficiles à utiliser ou à lire.
Lorsque quelqu'un définit une feuille de style pour afficher des pages Web, cette feuille de style est remplacée par la feuille de style de l'auteur de la page. Si l'utilisateur marque un style comme !important, ce style prévaut sur la feuille de style de l'auteur de la page Web, même si l'auteur marque une règle comme !important.
Cette hiérarchie est utile pour les utilisateurs qui ont besoin de définir des styles d'une certaine manière. Par exemple, un lecteur malvoyant peut avoir besoin d'augmenter les tailles de police par défaut sur toutes les pages Web qu'il utilise. En utilisant votre directive !important avec parcimonie dans les pages que vous créez, vous répondez aux besoins uniques de vos lecteurs.