CSS Spezifität / Vermeidung bzw. Verringerung von !important

[voodoopupp]

Ich weiß, das hat keine äußerste Priorität, aber es wäre wünschenswert, wenn die Nutzung von !important in den CSS Klassen soweit möglich vermieden wird.

Denn erschwert die Anpassung der CSS Dateien doch hier und da. Gerade auch in Hinblick auf die Idee mit den ​weitgehend updatesicheren Templates

Alleine im aktuellen tpl_modified_responsive (2.0.7.2) kommt es ~ 140 mal vor, wovon sicherlich mehr als die Hälfte ohne Probleme entfernt werden könnte.

Viel mir gerade wieder auf, weil Markus das hier auch wieder mit !important ergänzt hatte: ​Template Responsive 8 / Listpunkte

Im Template tpl_modified_respinsive_8 kommt es aktuell über 200 mal vor!

Ich möchte Markus' Fähigkeiten hier in keiner Weise angreifen, er steht da weit über mir :), aber ich denke, dass können wir besser. ;)

Klar, benötigt man es hier und da, aber unnötige vermeiden ist sicherlich besser, da man diese CSS Klassen dann entsprechend einfacher überschreiben kann ohne wiederum selbst !important setzen zu müssen.

[anonymous]

Hi Dominik,

ich gebe dir Recht dass man important soweit wie möglich verhindern sollte und ich gebe dir auch Recht dass sich Sicherheit das ein oder andere important überflüssig ist. Bei der Mehrheit wird das aber nicht so einfach möglich sein dieser zu eleminieren.

Das ist aufgrund des Ladens von CSS Dateien nicht ganz so einfach.
Allgemein gilt dass die zuletzt geladenen CSS Anweisungen zünden.

Ein einfaches Beispiel.
Nehmen wir die Sumo Select Box.
Die wird über die entsprechende CSS Datei definiert welche im Footer geladen wird.
Wenn ich hier das Aussehen ändern möchte habe ich eigentlich nur 2 Möglichkeiten.
Ich änderen die CSS Datei für das Sumo Select oder aber ich schreibe mit important in das Stylesheet. Da ich in das Stylesheet schreibe bist du zuimindst für die ganzen Plugin-Dateien auf der sicheren Seite was Updates angeht.

Du kannst sicher sein dass ich mir schon 2x überlege ob ich ein Important setze oder auch nicht.
In den meisten Fällen lässt es sich aber nicht verhindern.

Auch für Important gilt aber ... wenn du eine identische Kaskade setzt wird auch hier das letzte important greifen und nicht das erste.

Markus

[anonymous]

Hi Dominik,

noch ein Nachtrag ... ich hab mal gerade in unserem Kauftemplate 7 in der Original Bootstrap 4 CSS Datei geschaut wieviele "importants" die verwenden. Die kommen auf über 1000 "importants".
Und ich würde jetzt mal behaupten wollen dass die schon auf sowas achten und optimieren wo es geht. :-)

Markus

[voodoopupp]

Hallo Markus,

da bin ich voll bei dir. Vor allem in Bezug auf das Überschreiben seitens der CSS-Dateien von Modulen in Bezug auf die Updatefähigkeit.

Und wie du korrekt sagst, die letzte CSS Anweisung zündet.

Aber, ohne genauer alles kontrolliert zu haben, denke ich, dass z.B. solche Anweisungen

a.black {
  color:#333 !important;
}
a.black:hover {
  color:#b0377e !important;
  text-decoration:none !important;
}

alleine durch verschieben unterhalb von

a, a:link, a:visited, a:active, a:hover {

das !important vermeiden.

Ebenso das hier

@media only screen and (min-width: 601px) {
  .cn_nomobile_text { display:initial; }
  .cart_02 { display:inline-block !important; }
  .cart_04 { display:inline-block !important; }
  .cart_05 { display:none !important; }
  .wish_02 { display:inline-block !important; }
  .wish_04 { display:inline-block !important; }
  .wish_05 { display:none !important; }
}

Wenn man das über die gleichen CSS Kaskaden abfängt, wie vorher bereits genutzt, dann sähe es so aus und !important wäre vermieden:

@media only screen and (min-width: 601px) {
  .cn_nomobile_text { display:initial; }
  ul.contentnavigation li.cart .cart_02 { display:inline-block; }
  ul.contentnavigation li.cart .cart_04 { display:inline-block; }
  ul.contentnavigation li.cart .cart_05 { display:none; }
  ul.contentnavigation li.wishlist .wish_02 { display:inline-block; }
  ul.contentnavigation li.wishlist .wish_04 { display:inline-block; }
  ul.contentnavigation li.wishlist .wish_05 { display:none; }
}

Das soll auch nur ein Denkanreiz sein, denn jedes !important, welches vermieden wird, führt dazu, dass der Code auch macht, was er soll, wenn man etwas ändert und nicht erst feststellt, dass irgendwo ein !important immer alles überschreibt - und man dann erneut ein weiteres setzen muss, damit es funktioniert und sich schlußendlich dann drei !importants gegenseitig überschreiben ;)

Aber das ist immer das Streben nach der Perfektion, und ich weiß, dass du wesentlich mehr verwalten musst als nur 1 Template - und da geht man sicherlich auch eher mal den Weg, dass es auf der breiten Fläche gut passt :)

Viele Grüße
Dominik

PS:
bootstrap ist ja bloated ohne Ende :D
Mir gings auch nicht darum, dass es schneller oder weniger schnell ist, sondern eben sauberer.

Aber am Ende gehts ja immer darum: es soll funktionieren

[anonymous]

Hi Domink,

das ist korrekt mit den Links.
Normalerweise gehören die ganz nach oben ... dann hat man zumindst mit den Stellen auch keine Probleme mehr. Vom Prinzip her müsste man im stylesheet mal aufräumen.
Das ist alles hierachisch gewachsen ... .und irgendwann muss man da mal mit dem Besen durch.

Das hätte dann aber erstmal den Nachteil dass ich da einiges umbauen bzw. umstrukturieren müsste. Und gerade wenn es um Updates geht und du mergen willst siehst du dann erstmal sehr viel "rot" :-)

Mal schauen was alles kommen bzw. passieren wird wenn es mit den Child-Templates in die Vollen geht :-)

Markus

[voodoopupp]

Ich kenne das zur Genüge, und ich hab quasi nur ein paar wenige Templates :D

Ui, ich freu mich auf Child-Templates ;)

[Gerhard Waldemair]

Bei Einführung des Nova Templates in r15291 wurde bis auf wenige Stellen auf !important verzichtet.

[Torsten Riemer]

In r15383 sind weitere !important für das Template "tpl_modified_nova" entfernt worden.