Toute caractéristique des mains "tordues" devient mauvaise. L'importateur ne fait pas exception. La mauvaise chose n'est pas ce qu'il sait, mais la façon dont il est utilisé.
Comment ça marche! Important
En CSS, nous utilisons le mécanisme de spécificité pour hiérarchiser les styles. Nous écrivons des cascades ou des sélecteurs complexes, augmentons le poids du sélecteur, indiquant ainsi au navigateur la priorité de certains styles par rapport à d'autres.
Par exemple:
.content .title { color: red; } .title { color: blue; }
Dans ce cas, malgré le fait que la couleur bleue soit appliquée au titre après le rouge, nous obtiendrons toujours un titre rouge. Parce que le premier sélecteur est plus spécifique (si tout à coup vous n'êtes pas familier avec cela, ne lisez pas plus loin - cela ne fera qu'empirer, c'est mieux
ici et apprenez la spécificité).
Donc, en utilisant le même exemple, mais avec! Important, nous découvrons soudain qu'il ne se soucie pas de votre spécificité.
.content .title { color: red; } .title { color: blue !important; }
Le titre sera bleu! Cette propriété viole le flux naturel des règles que nous avons écrites et donne aux styles de priorité inférieure la priorité la plus élevée.
Et bien, comment "cracher" ... Pas vraiment, et cracher. Ajoutons un autre importateur.
.content .title { color: red !important; } .title { color: blue !important; }
Et le titre est de nouveau rouge. Parce que nous en avons deux! Conflits importants, et ce conflit est résolu en comparant les poids des sélecteurs.
Un importateur est mauvais quand il est:
.title { color: red; }
«Hmm, j'ai écrit rouge, pourquoi mon titre n'est-il pas rouge? Et si oui? " .title { color: red !important; }
“Génial! Rouge! » Mais est-ce vraiment bon?
Cette approche est mauvaise, du moins parce que vous redéfinissez les styles sans comprendre pourquoi ils n'ont pas été appliqués sans importateur. Très probablement, le poids du sélecteur que vous avez utilisé s'est avéré tout simplement insuffisant et, en écrivant un sélecteur légèrement plus précis et «lourd», vous résoudriez votre problème, et vous redéfiniriez rigidement les styles, et c'est bien si vous connaissez et vérifiez tous les endroits où cette classe a été utilisée, mais si ce n'est pas le cas, alors vous avez subordonné l'élément à un endroit et vous avez probablement éclaté à un autre.
Outil pour correctif
Très souvent, lorsque je pose une question sur les importateurs à quelqu'un, j'entends une réponse dans le style:
"J'utilise important lorsque j'ai besoin de résoudre rapidement le problème et que je n'ai pas le temps de comprendre le code que je n'ai pas écrit et qui est très mal écrit .
"Oui, mais seules les tâches sont toujours «urgentes», de telles tâches, en règle générale, personne ne finira jamais, alors laissez-le. Vous n'avez pas remarqué vous-même comment vous avez rendu le «mauvais code étranger» encore pire.
Que signifie rapide? Est-il si difficile et long de trouver le poids nécessaire du sélecteur pour la redéfinition? Nous utilisons très activement DevTools dans le développement, et nous avons la réponse pour résoudre ce problème.
Nous inspectons l'élément que nous voulons changer. Sa couleur actuelle est le noir. Nous regardons à quel sélecteur cette couleur a été affectée?
Nous utilisons le même sélecteur pour attribuer une nouvelle couleur ou pour augmenter le poids, et le point est dans le chapeau, quelle que soit la difficulté de ce sélecteur.
C'est long? Il me semble que cela diffère peu dans le temps de l'écriture! Important, mais c'est beaucoup plus correct et plus sûr.
Solutions tierces et code de quelqu'un d'autre
La deuxième réponse la plus populaire à la question sur la nécessité d'utiliser des importateurs:
"J'utilise! Important lors de la redéfinition des styles de bibliothèques et plugins tiers ou CMS-ok .
"Cette réponse est un peu plus proche de la vérité, mais seulement si elle est formulée un peu plus précisément. C'est sous cette forme qu'il est incorrect, car les styles de fichiers tiers peuvent être remplacés de la même manière que les vôtres, en les ajoutant simplement après avoir connecté les styles d'autres personnes et en augmentant le poids du sélecteur.
Cependant, dans certains cas, cette réponse «entre» dans la question. Par exemple, si vous avez connecté un curseur à votre page, qui est implémenté de sorte que lorsque vous changez de diapositive, le JavaScript écrase les valeurs de certaines propriétés en CSS.
Et pour une raison quelconque, vous devez remplacer ces propriétés, en ignorant les modifications apportées au plug-in lui-même.
JS peut uniquement réaffecter des valeurs de propriété à l'aide de styles en ligne. Autrement dit, toutes les propriétés modifiées pour un élément à l'aide de JavaScript seront simplement écrites dans l'attribut style. Du point de vue du mécanisme de spécificité, ces styles sont plus prioritaires, et peu importe la façon dont vous augmentez le poids du sélecteur, vous ne pourrez pas les écraser.
C'est précisément le
premier cas dans lequel nous ne pouvons tout simplement pas nous passer d'importants.
Si nous devons redéfinir les styles en ligne, seul important nous aidera.
La priorité des styles avec un importateur est supérieure à la priorité des styles en ligne, et si pour une raison quelconque vous avez besoin de réécrire les styles en ligne, vous n'avez pas d'autre choix que d'utiliser! Important.
Important pour le bien
Prenons un cas de plus, qui est parfois utilisé dans le code de diverses bibliothèques et plugins.
Si vous ouvrez le code source CSS de la bibliothèque Bootstrap, vous verrez que les développeurs de la bibliothèque ont très souvent recours à des importateurs. Peut-être qu'ils avaient aussi juste besoin de réparer rapidement, et ils l'ont fait (sarcasme), mais en général, il y a une explication plus appropriée. Dans ce cas, les s importants sont utilisés «pour de bon». De cette façon, les développeurs Bootstrap «protègent» leur code.
Le fait est qu'en connectant cette bibliothèque à votre site, vous pouvez redéfinir ses styles d'origine. Ainsi, les développeurs sont réassurés, et casser le comportement de leur code sera plus difficile si vous ne savez pas comment fonctionne la spécificité. Mais si vous comprenez comment fonctionne le mécanisme de spécificité en CSS, vous pouvez redéfinir leur importateur en écrivant vos styles avec l'importateur aussi, mais avec un sélecteur plus «lourd».
Ainsi, nous arrivons au
deuxième cas où il est impossible sans importateur.
Si vous devez remplacer important (le vôtre ou à partir d'une bibliothèque tierce), alors seulement! Important vous aidera.
C'est pourquoi il est incorrect de dire: "J'utilise des importateurs quand j'ai besoin de redéfinir les styles de bibliothèques tierces", il serait plus correct de dire: "J'utilise des importateurs quand j'ai besoin de redéfinir des styles en ligne ou autre! Important". Et peu importe d'où viennent ces styles: de vos fichiers ou de tiers.
Aides
Dans le paragraphe précédent, en fait, tous les cas sont décrits lorsque l'utilisation des importateurs sera normale et correcte. Ce sont des cas dans lesquels le recours à des importateurs sera inévitable. Mais il y a encore des cas dans lesquels le recours à des importateurs sera autorisé, même s'il n'est peut-être pas déjà tout à fait approprié.
Parfois, nous avons besoin de classes universelles auxiliaires que nous utilisons dans notre code dans le but de réutiliser le code et de simplifier.
Par exemple, nous créons une sorte de classe .warning, que nous appliquerons à divers éléments de la page, indiquant ainsi leur importance.
.warning { color: red; }
Et nous voulons qu'en appliquant cette classe à n'importe quel élément, nous rendrons définitivement le texte de cet élément rouge. Mais un élément peut avoir des styles de priorité plus élevée enregistrés à l'aide d'un sélecteur plus précis, puis notre couleur de la classe .warning sera meulée. Dans ce cas, en ajoutant de l'importance à notre classe d'assistance, nous la rendons plus universelle, car la couleur utilisée dans cette classe sera plus prioritaire. Cependant, je ne peux pas dire que c'est bon. Après tout, cela rend les styles de classe plus prioritaires, mais cela ne vous garantit toujours pas un travail à cent pour cent, car cet assistant peut rencontrer d'autres choses importantes, et tout de même tout ira mal. Et puis, quand il s'avère que néanmoins, dans un certain cas, cette classe devrait rendre le texte «pas si rouge», alors vous «donnerez immédiatement naissance» à un nouveau sélecteur avec répétition de l'importateur.
Quand est-ce encore possible
Il est correct et normal à utiliser! Important lorsque vous devez remplacer les styles en ligne ou autres! Important.
Si vous suivez cette règle, il s'avère que dans la mise en page habituelle, en particulier si vous imposez une page à partir de zéro, vous n'avez pas besoin d'utiliser un importateur jusqu'au moment où vous commencez à connecter des solutions tierces à votre page, mais même c'est ainsi que nous triés ci-dessus, ne conduit pas nécessairement à leur utilisation.
Les méthodologies modernes comme BEM dictent également leurs propres règles, dans lesquelles l'utilisation de styles en ligne ou d'importateurs sera inappropriée.
Vous n'avez pas besoin d'un importateur, non pas parce qu'il est en quelque sorte mystérieux et terrible, mais simplement parce que dans la plupart des cas, vous pouvez vous en passer.
Toutes les exceptions que j'ai déterminées pour moi-même se résument généralement à des cas peu typiques. Par exemple, vous devrez peut-être l'utiliser lorsque vous développez votre propre bibliothèque, plug-in ou extension de navigateur et vous avez besoin d'un comportement de priorité plus élevée pour des styles spécifiques. Cependant, ceci est loin d'une utilisation régulière typique.