Jedes Merkmal in den "krummen" Händen wird schlecht. Der Importeur ist keine Ausnahme. Das Schlechte ist nicht, was er weiß, sondern wie er gebraucht wird.
Wie es funktioniert! Wichtig
In CSS verwenden wir den Spezifitätsmechanismus, um Stile zu priorisieren. Wir schreiben Kaskaden oder komplexe Selektoren, erhöhen das Gewicht des Selektors und zeigen dem Browser so die Priorität einiger Stile gegenüber anderen an.
Zum Beispiel:
.content .title { color: red; } .title { color: blue; }
In diesem Fall erhalten wir trotz der Tatsache, dass die blaue Farbe auf die Überschrift nach Rot angewendet wird, immer noch eine rote Überschrift. Da der erste Selektor spezifischer ist (wenn Sie damit plötzlich nicht vertraut sind, lesen Sie nicht weiter - es wird nur schlimmer, es ist
hier besser und Sie lernen die Spezifität).
Anhand des gleichen Beispiels, aber mit! Wichtig, stellen wir plötzlich fest, dass es ihm nicht um Ihre Spezifität geht.
.content .title { color: red; } .title { color: blue !important; }
Der Titel wird blau sein! Diese Eigenschaft verletzt den natürlichen Ablauf der von uns geschriebenen Regeln und gibt Stilen mit niedrigerer Priorität die höchste Priorität.
Nun, wie man "spuckt" ... Nicht wirklich und spuckt. Fügen wir einen weiteren Importer hinzu.
.content .title { color: red !important; } .title { color: blue !important; }
Und die Überschrift ist wieder rot. Weil wir zwei! Wichtige Konflikte haben, und dieser Konflikt wird durch Vergleichen der Gewichte der Selektoren gelöst.
Ein Importeur ist schlecht, wenn es ist:
.title { color: red; }
„Hmm, ich habe rot geschrieben, warum ist meine Überschrift nicht rot? Und wenn ja? " .title { color: red !important; }
“Großartig! Rot! “ Aber ist es wirklich gut?
Dieser Ansatz ist schlecht, zumindest, weil Sie die Stile neu definieren, ohne zu verstehen, warum sie nicht ohne Importer angewendet wurden. Höchstwahrscheinlich war das Gewicht des von Ihnen verwendeten Selektors einfach unzureichend. Wenn Sie einen etwas genaueren und „schwereren“ Selektor schreiben, lösen Sie Ihr Problem und definieren die Stile streng neu. Es ist gut, wenn Sie alle Stellen kennen und überprüfen Diese Klasse wurde verwendet, aber wenn dies nicht der Fall ist, haben Sie das Element an einer Stelle untergeordnet und wahrscheinlich an einer anderen gebrochen.
Tool für Hotfix
Wenn ich jemandem eine Frage zu Importeuren stelle, höre ich häufig eine Antwort im Stil von:
"Ich benutze wichtig, wenn ich das Problem schnell beheben muss und keine Zeit habe, Code zu verstehen, den ich nicht geschrieben habe und der sehr schlecht geschrieben ist .
"Ja, aber nur Aufgaben sind immer "dringend", solche Aufgaben werden in der Regel nie erledigt, also lassen Sie es. Sie selbst haben nicht bemerkt, wie Sie den "Bad Alien Code" noch schlimmer gemacht haben.
Was heißt schnell? Ist es so schwierig und lang, das für die Neudefinition erforderliche Gewicht des Selektors zu ermitteln? Wir setzen DevTools sehr aktiv in der Entwicklung ein und haben dort die Antwort, um dieses Problem zu lösen.
Wir untersuchen das Element, das wir ändern möchten. Die aktuelle Farbe ist schwarz. Wir schauen uns an, welchem Selektor diese Farbe zugewiesen wurde.
Wir verwenden denselben Selektor, um eine neue Farbe zuzuweisen oder das Gewicht zu erhöhen, und der Punkt ist im Hut, egal wie schwierig dieser Selektor ist.
Ist es lang Mir scheint, dies unterscheidet sich in der Zeit kaum vom Schreiben! Wichtig, aber es ist viel korrekter und sicherer.
Lösungen von Drittanbietern und der Code einer anderen Person
Die zweithäufigste Antwort auf die Frage nach der Notwendigkeit, Importeure zu verwenden:
"Ich verwende! Wichtig bei der Neudefinition der Stile von Bibliotheken und Plugins von Drittanbietern oder CMS-ok .
"Diese Antwort kommt der Wahrheit etwas näher, allerdings nur, wenn sie etwas genauer formuliert ist. In dieser Form ist es falsch, da die Stile von Dateien von Drittanbietern auf die gleiche Weise überschrieben werden können wie Ihre eigenen, indem Sie sie einfach hinzufügen, nachdem Sie die Stile anderer Personen verbunden und das Gewicht des Selektors erhöht haben.
In einigen Fällen "gerät" diese Antwort jedoch in die Frage. Wenn Sie beispielsweise einen Schieberegler mit Ihrer Seite verbunden haben, der so implementiert ist, dass beim Wechseln der Folie die Werte einiger Eigenschaften in CSS durch JavaScript überschrieben werden.
Und aus irgendeinem Grund müssen Sie diese Eigenschaften überschreiben und die Änderungen am Plugin selbst ignorieren.
JS kann Eigenschaftswerte nur mithilfe von Inline-Stilen neu zuweisen. Das heißt, alle Eigenschaften, die mit JavaScript für ein Element geändert wurden, werden einfach in das style-Attribut geschrieben. Aus Sicht des Spezifitätsmechanismus sind diese Stile vorrangiger, und unabhängig davon, wie Sie das Gewicht des Selektors erhöhen, können Sie sie nicht überschreiben.
Dies ist genau der
erste Fall, auf den wir einfach nicht verzichten können.
Wenn wir Inline-Stile neu definieren müssen, hilft uns nur das Wichtige.
Die Priorität von Stilen mit einem Importer ist höher als die Priorität von Inline-Stilen. Wenn Sie aus irgendeinem Grund Inline-Stile neu schreiben müssen, haben Sie keine andere Wahl als! Wichtig.
Wichtig für das Gute
Betrachten wir einen weiteren Fall, der manchmal im Code verschiedener Bibliotheken und Plugins verwendet wird.
Wenn Sie den CSS-Quellcode der Bootstrap-Bibliothek öffnen, werden Sie feststellen, dass die Bibliotheksentwickler dort sehr häufig auf die Verwendung von Importern zurückgreifen. Vielleicht mussten sie sich auch nur schnell bessern, und das taten sie (Sarkasmus), aber im Allgemeinen gibt es eine passendere Erklärung. In diesem Fall werden wichtige s "für immer" verwendet. Auf diese Weise schützen Bootstrap-Entwickler ihren Code.
Tatsache ist, dass Sie durch Verbinden dieser Bibliothek mit Ihrer Site ihre ursprünglichen Stile neu definieren können. Entwickler sind somit rückversichert, und es wird schwieriger, das Verhalten ihres Codes zu ändern, wenn Sie nicht wissen, wie die Spezifität funktioniert. Wenn Sie jedoch wissen, wie der Spezifitätsmechanismus in CSS funktioniert, können Sie den Importer neu definieren, indem Sie Ihre Stile auch mit dem Importer, jedoch mit einem "schwereren" Selektor, schreiben.
So kommen wir zum
zweiten Fall, wenn es ohne Importeur nicht möglich ist.
Wenn Sie wichtiges überschreiben müssen (deins oder aus einer Bibliothek eines Drittanbieters), hilft Ihnen nur! Important.
Aus diesem Grund ist es falsch zu sagen: "Ich verwende Importer, wenn ich die Stile von Bibliotheken von Drittanbietern neu definieren muss." Es ist richtiger zu sagen: "Ich verwende Importer, wenn ich Inline-Stile oder andere neu definieren muss! Wichtig". Dabei spielt es keine Rolle, woher diese Stile stammen: aus Ihren Dateien oder von Drittanbietern.
Helfer
Tatsächlich sind im vorherigen Absatz alle Fälle beschrieben, in denen die Verwendung von Importeuren normal und korrekt ist. Dies sind Fälle, in denen der Einsatz von Importeuren unvermeidlich sein wird. Es gibt jedoch immer noch Fälle, in denen der Einsatz von Importeuren zulässig sein wird, obwohl dies möglicherweise bereits nicht ganz angemessen ist.
Manchmal benötigen wir universelle Hilfsklassen, die wir in unserem Code verwenden, um den Code wiederzuverwenden und zu vereinfachen.
Zum Beispiel erstellen wir eine Art .warning-Klasse, die wir auf verschiedene Elemente auf der Seite anwenden und so deren Bedeutung anzeigen.
.warning { color: red; }
Und wir möchten, dass durch Anwenden dieser Klasse auf ein Element der Text in diesem Element definitiv rot wird. Für ein Element können jedoch Stile mit höherer Priorität mit einem genaueren Selektor aufgezeichnet werden, und dann wird unsere Farbe aus der .warning-Klasse gemahlen. In diesem Fall erhöhen wir die Universalität, indem wir unserer Hilfsklasse Wichtiges hinzufügen, da die in dieser Klasse verwendete Farbe Vorrang hat. Ich kann jedoch nicht sagen, dass es gut ist. Das macht die Klassenstile zwar vorrangiger, garantiert Ihnen aber dennoch keine hundertprozentige Arbeit, da dieser Helfer möglicherweise auf andere wichtige Dinge stößt und trotzdem alles schief geht. Und wenn sich dann herausstellt, dass diese Klasse in einem bestimmten Fall den Text doch "nicht so rot" machen sollte, dann "gebären" Sie sofort einen neuen Selektor mit Wiederholung des Importeurs.
Wann ist es noch möglich?
Es ist korrekt und normal zu verwenden! Wichtig, wenn Sie Inline-Stile oder andere Stile überschreiben müssen! Wichtig.
Wenn Sie diese Regel befolgen, stellt sich heraus, dass Sie im üblichen Layout, insbesondere wenn Sie eine Seite von Grund auf neu erstellen, erst dann einen Importer verwenden müssen, wenn Sie damit beginnen, Lösungen von Drittanbietern mit Ihrer Seite zu verbinden, aber auch so sind wir oben aussortiert, führt nicht zwangsläufig zu deren Verwendung.
Moderne Methoden wie BEM schreiben auch ihre eigenen Regeln vor, in denen die Verwendung von Inline-Stilen oder Importeuren unangemessen ist.
Sie brauchen keinen Importeur, nicht weil er irgendwie mysteriös und schrecklich ist, sondern einfach, weil Sie in den meisten Fällen auf ihn verzichten können.
Alle Ausnahmen, die ich für mich festgestellt habe, sind in der Regel nicht sehr typisch. Möglicherweise müssen Sie diese Option verwenden, wenn Sie Ihre eigene Bibliothek, Ihr eigenes Plug-In oder Ihre eigene Browsererweiterung entwickeln und für bestimmte Stile ein Verhalten mit höherer Priorität benötigen. Dies ist jedoch weit entfernt von einer typischen normalen Verwendung.