Priorität von Style Anweisungen in Klassen, IDs und Inline

Wie überschreibt man CSS richtig?

    •  » 
    •  » Priorisierung Cascading Stylesheets – So macht man es richtig!
// navigation

Blog


// content

Wie überschreibt man CSS Anweisungen richtig ohne "!important"?

Wer sich bereits mit CSS Anweisungen im Web auseinander gesetzt hat, wird eine ganze Reihe von Möglichkeiten kennen diese zu deklarieren und anschließend zu überschreiben. Ein absolutes No-Go ist dabei die der Anweisung nachgesetzte Deklaration "!important". Warum man diese in 99% aller Fälle nicht benötigt und wie man es richtig macht, erklären wir in diesem Artikel.

Jeder kennt die normale Inline-Anweisung, die jedes HTML Element per "style"-Attribut erhalten kann. So ist es z.B. möglich einen Text ziemlich schnell und einfach rot zu färben:

     

HTML Beispiel mit Inline CSS

html

<p style="color:red;">Text ist rot</p>

Diese Anweisungen werden aber schnell unübersichtlich und sind vor allem nicht global änderbar. Wenn wir nun also den roten Text auf unserer Seite in dunkelrot färben wollen, müssten wir sämtliche HTML Dokumente und Datenbankeinträge nach dieser Anweisung durchsuchen und z.B. "p style="color:red;" durch "p style="color:darkred;" ersetzen. Das ist natürlich wenig praktikabel.

Daher entschieden sich die ersten Siedler des Web dazu Style-Anweisungen in den Kopf der Seite zu schreiben

     

CSS Style Block (Farbe Rot für alle Paragraph Elemente)

<style>p {color: red; }</style>

Nun wären alle Paragraph-Elemente der entsprechenden Seite rot gefärbt. Wenn wir dies ändern wollen, können wir für sämtliche Elemente der Seite die Farbe anpassen, indem wir einfach die eine Zeile im Kopf bearbeiten.

Eventuell möchten wir aber nicht alle Paragraph-Elemente rot färben, sondern nur bestimmte. Dabei kommt es nun darauf an, ob es ein bestimmtes Element ist, das nur einmalig vorkommt und somit auch per Javascript und dessen ID ansteuerbar sein soll oder ob es sich um eine "Klasse" von Elementen handeln soll.

     

Cascading Stylesheet Block mit Klasse oder ID

html

<style>
p.KlasseRot {color: red; }
#EinmaligRotesItem { color: red; }
</style>

<p class="KlasseRot">Roter Text</p>
<p id="EinmaligRotesItem">Roter Text, der nur einmal auf der Seite vorkommt</p>

Im jeweiligen HTML Element würden wir diese Klasse oder ID wie oben angegeben zuweisen.

Nun da wir die generellen Methodik von CSS erklärt haben, widmen wir uns einmal der Grundstruktur, in der Befehle gelten. Im Prinzip werden CSS Befehle, die untereinander stehen überschrieben. Wenn man also zuerst die Farbe rot definiert für die Klasse "KlasseRot" und darunter derselben Klasse nun die Farbe weiss geben würde, erhielten alle Elemente die Farbe weiss, es sei denn sie lägen im HTML Code dazwischen. Dies sollte aufgrund der Deklaration des CSS im Kopf der Seite aber nie vorkommen!

Wenn wir nun also an der falschen Stelle eine CSS Deklaration überschreiben wollen, hilft uns nur "!important" weiter, da dies vorrangig gegenüber Elementen ist, die diese Eigenschaft nicht erhalten haben, selbst wenn der CSS Code vor dem anderen stünde. Nun bemerken Sie auch worauf wir hinaus möchten: Sie befinden sich an der falschen Stelle im CSS! Da es übliche Praxis ist die Stylesheets der Frameworks vorab einzubinden, um so mit den eigenen CSS Dateien diese Definition überschreiben zu können, sollten Sie nie an dem Punkt landen, wo es kein vorbeikommen mehr an "!important" gibt.

Ein zusätzliches Problem bei der Deklaration von Style-Attributen mit "!important" ist die Ausführung von Media Querys. Da Media Querys nur dann ausgeführt werden, wenn bpsw. die Bildschirmbreite maximal 767px ist, sollten diese auch immer am Ende Ihrer CSS Definitionen stehen, um etwaige andere Definitionen dann für bestimmte Bildschirmgrößen (in unserem Falle Smartphones) zu überschreiben.

Haben Sie nun vorab im normalen CSS Werte mit "!important" versehen, können Sie nun nicht mehr zurück und müssen diese nachrangig auch mit "!important" überschreiben, um den gewünschten Effekt zu erhalten. Das alles führt dazu, dass wir generell von dieser Anweisung abraten und nur in Ausnahmefällen selbst dazu greifen würden. Beispielsweise wäre ein Ausnahmefall, wenn im Internet Explorer bestimmte Befehle nicht oder falsch ausgeführt werden und wir uns aber sicher sind, dass dies nur mit einer solchen Anweisung bei zu kommen ist.

Zusammenfassend ist zu sagen:

  • CSS Anweisungen in Dateien schreiben und diese untereinander im <head> implementieren
  • Dabei darauf achten, dass Frameworks oben stehen und Media Query Anweisungen ganz am Ende
  • Auf "!important" verzichten wir ganz
  • Sollten Elemente in unserem CSS doppelt vorkommen, fragen wir uns besser wieso (Performance leidet und Sinnhaftigkeit ist mehr als fraglich)
  • Können wir mit unserem eigenen CSS Elemente nicht mehr stylen, untersuchen wir das Element mit z.B. Chrome oder Firefox und schauen woher die Styleanweisungen kommen. Hierfür am besten ConcatenateCSS oder ähnliches abschalten im Testsystem!

Die Priorisierung

Folgende Priorisierung wird für CSS von nahezu allen Browsern verwendet:

später geladene Dateien überschreiben vorherige

(hierzu einfach zuerst bspw. bootstrap.min.css laden und später im Code mit bs_overrides.css überschreiben). Hierbei ist aber trotzdem auf die Menge von Klassenangaben zu achten, bei gleichvielen (oder mehr) gewinnt die spätere Datei, bei weniger die erste!

mehr Klassenangaben überschreiben Definitionen mit weniger

z.B. footer .headline { font-size: 12px } und .headline { font-size: 14px } führt generell zu einer Überschriftengröße von 14px, welche im Footer auf 12px beschränkt wird

Link nicht anzeigen in HTML mit Inline Style

html

<a href="https://renoi.de" style="display: none">

Inline-Styles überschreiben CSS Anweisungen in Dateien

Der Code oben führt also immer zum Nichtanzeigen des Links
selbiges gilt für Anweisungen im Kopf der HTML Seiten (style-Block)

!important ist somit eine Art überschreibende Definition und kann für Notlösungen, um Zeit zu sparen, durchaus Sinn machen

Mithilfe dieses Befehls könnte man bspw. alle nachfolgenden Priorisierungen überschreiben und müsste so nur einmal im CSS Code etwas ändern – eine gute Struktur ist dies allerdings nicht, da man anschließend Probleme bekommt dies wieder zu ändern und sich Quasi in einem Teufelskreis aus !important Anweisungen verstricken kann. Ergo verwenden wir diesen Befehl nur für temporäre Bugfixes!

Generell gilt die Standardlogik für Code: Je später im Code diese Anweisungen auftauchen, desto wichtiger sind sie (mit Ausnahme der oben erwähnten Abweichungen für CSS). 

Rating: 4.0. 3 Bewertung(en).
3 anonyme Bewertungen
No rating done at all.
Dein Voting war (0 von 5) Du bist nicht eingeloggt.
Um persönliche Votings abzugeben, kannst du dich einloggen.
Click the rating bar to rate this item Please log on to do ratings

Kommentare

comments powered by Disqus