CSS !Wichtig: Was es ist und wann es verwendet wird

Veröffentlicht: 2020-06-27

Eines der nützlichsten und umstrittensten Elemente von CSS ist die Eigenschaft !important . Jeder Designer wird irgendwann im CSS-Code auf das Tag stoßen. Die eigentliche Frage und das Dilemma, die sich dabei stellen, lautet: „Wurde es richtig verwendet?“ Da CSS !important ein so mächtiges Werkzeug ist, müssen Entwickler und Designer bei der Verwendung Best Practices beachten. CSS !important kann zu allen möglichen Arten von Spaghetti-Code führen, und das ist für niemanden gut.

Was ist CSS wichtig?

Die Eigenschaft !important in CSS gibt an, dass die Regel, an die sie angehängt ist, Vorrang vor anderen Regeln hat. Es hat die höchste Priorität für das Element und den Selektor, mit dem es verwendet wird, und gibt Entwicklern und Designern daher eine spezifische Kontrolle über das Styling für einzelne Teile der Site. In den meisten Fällen bedeutet dies, dass das Standard-Design für die Site, das in style.css oder custom.css enthalten ist, überschrieben wird .

Jedes Vorkommen von !important gilt nur für die spezifische Zeile, in der es erscheint . Sie können die Eigenschaft also für einige, aber nicht alle Teile eines Snippets verwenden. Der CSS-Code für !important sieht so aus:

.example-class {
	color:#fff!important;
}

Das Wichtigste bei !important ist zweierlei:

  1. dem Wort wichtig muss immer ein Ausrufezeichen (!) vorangestellt werden.
  2. das Semikolon muss immer am Ende der Zeile stehen, nach der !wichtigen Deklaration

!important kann sogar Seite für Seite oder Modul für Modul verwendet werden (im Fall von Seitenerstellern wie Divi), wenn Sie möchten – obwohl Sie so in den Spaghetti-Code gelangen, was welches Element überschreibt Welche Seite und in welcher Reihenfolge?

Jeder Designer wird irgendwann auf den CSS-wichtigen Tag stoßen und muss eine Entscheidung treffen. Lohnt es sich, das Standarddesign der Website zu überschreiben?

Manchmal ist die Antwort ein klares Ja. Zu anderen Zeiten ist es ein hartes und schnelles Nein. Schauen wir uns einige Best Practices mit CSS an, die wichtig sind, um zu wissen, wann es wahrscheinlich weder jetzt noch in Zukunft zu Problemen führt.

Wann Sie CSS verwenden sollten Wichtig

Die primäre (und am weitesten verbreitete) Verwendung von !important ist, wenn eine Klasse, die mit einem primären Selektor interagiert, anders gestaltet werden soll. Vielleicht möchten Sie, dass die Überschrift und die Metainformationen Ihres Blogs eine andere Schriftart und Farbe haben als der Rest Ihrer Website. Der Standardstil für diese Elemente wird von den Selektoren h1 und p in Ihren CSS-Dateien geerbt. Was auch immer Sie für die Site-Standardeinstellungen in Ihren .css- Dateien oder im WordPress-Theme-Anpasser festgelegt haben, wird angezeigt.

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';
}

Sie können die einzelnen gewünschten Elemente (Blog-Post-Titel und Meta-Info) mit den Klassen ändern. Eintragstitel und .post-meta. Und da Sie möchten, dass sie immer noch einige der Stile von den Eltern h1 und p erben, verwenden Sie h1.entry-title und p.post-meta , um diese speziell aufzurufen.

h1.entry-title, p.post-meta {
	color: white!important;
	font-family:'Poppins'!important;
}

Wenn diese Snippets im selben Stylesheet sind, wird der Top-Code in allen Fällen wirksam, außer wenn Post-Titel und Post-Meta angezeigt werden. Die wichtige CSS-Eigenschaft überschreibt die Standardeinstellung und ermöglicht Ihnen eine genaue Kontrolle darüber.

Diese Art der individuellen Anpassung ist die Hauptanwendung von !important . Aber nicht der einzige.

Verwenden Sie CSS Wichtig, um Klassen, IDs und Elemente zu schützen

Sie können !important auch verwenden, um verschiedene Elemente Ihrer Seite zukunftssicher zu machen, die durch die Weiterentwicklung der Site auf unerwartete Weise verändert werden könnten. Sie könnten beispielsweise einen bestimmten Stil für Abo-Boxen oder E-Mail-Opt-Ins oder YouTube-Einbettungen entwickeln. Jeder von diesen erbt möglicherweise unterschiedliche Stile von Ihren Stylesheets an verschiedenen Stellen. Die Verwendung des !important- Tags kann dazu führen, dass Sie das Styling Ihrer Formulare oder Schaltflächen mit einer bewussten Hand ändern können.

Benennen Sie das Element einfach mit einer Klasse oder ID und schreiben Sie dann !important in jede einzelne Zeile.

.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! Zukunftssicher durch regelmäßige Änderungen Ihrer Stylesheets.

Verwenden von Inline-Stilen

Dies ist einer dieser Anwendungsfälle, die für viele Menschen auftreten können oder auch nicht. Früher war es sehr verbreitet, aber es ist weniger geworden, da wir uns davon entfernt haben, unsere Beiträge und Seiten von Hand zu codieren. Wenn Sie jedoch jemals in den HTML-Code eines Gutenberg-Blocks oder die Textansicht des klassischen WordPress-Editors eintauchen, können Sie !important unbedingt mit Inline-CSS-Styling verwenden.

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now!</p>
</div>

Dies ist aus mehreren Gründen wichtig. Der erste besteht darin, dass Sie jede Codezeile auf Ihrer Seite gezielt steuern können, indem Sie style=“x:y!important;“ verwenden. und zweitens können Sie jedes bereits auf diese Seite angewendete CSS überschreiben. Auch wenn dieser Wert !wichtig ist. Zum Beispiel:

<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>

Selbst wenn ein eingebettetes HTML-Styling mit <style></style> vorhanden ist , das !important auf demselben Selektor verwendet, wird das Inline-CSS, das auf den bestimmten Absatz abzielt, gerendert.

Achten Sie darauf, wichtige Tags zu stapeln

Lassen Sie uns die letzten paar Beispiele nehmen und ein Wort der Vorsicht äußern. Diese Arten von Anwendungen sind in kleinen Dosen in Ordnung. Sie können sie in einmaligen Situationen verwenden, und wahrscheinlich wird niemand jemals ein Problem damit haben. Denn einmalig haben Sie mit !important gezielt ein einzelnes Element gestylt. Wofür es gedacht ist .

Wenn Sie jedoch anfangen, !important als Krücke zu verwenden, um zu vermeiden, dass Ihre Stylesheets so oft bearbeitet werden, oder um mehrere Probleme auf derselben Site schnell zu beheben, ist dies der Anfang des Spaghetti-Codes. Vor allem für zukünftige Entwickler, die nicht Sie sind. Während es Ihnen vielleicht schwerfällt, die Reihenfolge herauszufinden, in der die !wichtigen s gerendert werden, kann es für einen zukünftigen Entwickler unmöglich sein.

Was schließlich passiert, ist, dass es auf der Site so viele gestapelte !important s gibt, die mit mehreren Stylesheets, Seiten und Modulen interagieren, dass normales CSS selten rendert. Und manchmal wird sogar etwas, das als !important gekennzeichnet ist, nicht gerendert. Oder noch schlimmer, jede nachträgliche Änderung muss markiert werden !wichtig nur damit sie angezeigt wird, es sei denn, Sie möchten das Styling der Site abreißen und neu aufbauen.

Einpacken

CSS wichtig ist ehrlich gesagt eines der mächtigsten Werkzeuge im Werkzeugkasten eines Designers. Sie können jedes Element auf Ihrer Website problemlos anpassen, ohne sich Sorgen machen zu müssen, dass Untergebene oder Kollegen beeinträchtigt werden. Aber wenn Sie es übertreiben, können die Effekte zu einem Albtraum von Seiten und Elementen werden, die versuchen, sich gegenseitig zu überschreiben, und was einst wichtig war, ist zum Standard geworden, kann aber nicht als Standard festgelegt werden. Versuchen Sie also, !important sparsam einzusetzen, damit Sie es richtig machen, wenn Sie etwas Besonderes oder Zukunftssicheres brauchen.

Wie ist es für Sie, CSS !important in Ihren Projekten einzusetzen?

Beitragsbild des Artikels von wan wei / shutterstock.com