L'un des meilleurs moyens d'apprendre à coder des sites Web consiste à consulter les codes sources d'autres sites. Cette pratique correspond au nombre de professionnels du Web qui ont appris leur métier, en particulier à l’époque antérieure aux nombreuses options de cours, de livres et de sites de formation en ligne.
Si vous essayez cette pratique et examinez les feuilles de style en cascade (CSS) d'un site, une chose que vous pouvez voir dans ce code est une ligne qui dit! Important. Qu'est-ce que cela signifie et, tout aussi important, comment utilisez-vous correctement cette déclaration dans vos feuilles de style?
La cascade de CSS
Tout d’abord, il est important de comprendre que les feuilles de style en cascade font Cascade , ce qui signifie qu'ils sont placés dans un ordre particulier. En général, cela signifie que 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 et est ensuite modifié dans le document, la seconde instance de ce style est celle qui est appliquée dans les instances suivantes, et non 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 répertorié sera utilisé.
Par exemple, imaginons que les styles suivants étaient 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 en rouge. Cela est dû au fait que la valeur "noire" est répertoriée en second. Puisque CSS est lu de haut en bas, le style final est "noir" et donc celui-ci gagne.
p {couleur: rouge; }p {couleur: noir; }
Comment! Important change la priorité
Maintenant que vous comprenez comment CSS traite ces règles presque identiques, voyons comment la directive! Important change un peu les choses.
La directive! Important affecte la manière dont votre CSS passe en cascade tout en suivant les règles que vous jugez primordiales et qu'il convient d'appliquer. Une règle qui a la directive! Important est toujours appliquée, peu importe où cette règle apparaît dans le document CSS.
Pour rendre le texte du paragraphe toujours rouge, à partir de l'exemple ci-dessus, vous utiliserez:
p {couleur: rouge! important; }p {couleur: noir; }
Maintenant tout le texte apparaîtra en rouge, même si la valeur "noire" est listée en second. La directive! Important outrepasse les règles normales de la cascade et donne à ce style une très grande spécificité.
Si vous aviez absolument besoin que les paragraphes apparaissent en rouge, ce style le ferait, mais cela ne veut pas dire que c'est une bonne pratique. Voyons maintenant quand vous voudrez peut-être utiliser! Important et quand ce n’est pas approprié.
Quand utiliser! Important
La directive! Important est très 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 problème de spécificité, vous pouvez ajouter la déclaration! Important à votre style pour voir si cela résout le problème.
Si l'ajout de! Important corrige effectivement le problème de style, vous venez de déterminer qu'il s'agit d'un problème de spécificité. Cependant, vous ne voulez pas laisser ce code important en place, il a été mis là seulement à des fins de test.
Les tests étant terminés, vous devez maintenant supprimer cette directive et ajuster votre sélecteur pour obtenir la spécificité dont vous avez besoin pour que votre style fonctionne. ! important ne doit pas pénétrer dans vos sites de production, en partie à cause des modifications apportées à la cascade normale.
Si vous vous appuyez trop lourdement sur la déclaration! Important pour obtenir les styles souhaités, vous obtiendrez éventuellement une feuille de style jonchée de! Styles importants. Vous allez fondamentalement changer 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 faisant partie d'un thème ou d'une structure de modèle. Même dans ces cas, utilisez cette approche avec la plus grande parcimonie possible et essayez plutôt d’écrire des feuilles de style épurées qui comprennent la cascade.
Feuilles de style utilisateur
Il y a une note finale sur la directive! Important qu'il est essentiel de comprendre. Cette directive a également été mise en place pour aider les utilisateurs de pages Web à faire face aux feuilles de style qui les rendent difficiles à utiliser ou à lire.
Généralement, si un utilisateur 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 Web. Si l'utilisateur marque un style comme étant important, ce style remplace la feuille de style de l'auteur de la page Web, même si l'auteur marque une règle comme étant importante.
Ceci est utile pour les utilisateurs qui doivent définir les styles d’une certaine manière. Par exemple, une personne peut avoir besoin d'augmenter la taille de police par défaut sur toutes les pages Web qu'elle utilise. En utilisant votre directive! Important avec parcimonie dans les pages que vous créez, vous répondez aux besoins particuliers de vos utilisateurs.
