zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden !important besser vermeiden.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.11.2015, 18:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.03.2015
Beiträge: 43
Seph befindet sich auf einem aufstrebenden Ast
Standard !important besser vermeiden.

Ich benutze zu oft !important und versuche besser zu verstehen, wann ich es sein lassen sollte.

Als Beispiel:

Ich möchte ein Bild verändern und habe zwei Artikelayouts.

Der eine selector lautet:

.single page .the-content img {...}

Der zweite lautet:

.longform-post .the-content img {...}

In dieser Situation habe ich das Problem, dass der erste Selektor mir immer die Styles vom zweiten überschreibt. Erst mit !important setzt sich longform-post durch, aber fügt die Styles dann auch korrekt nur für .longform-posts hinzu. Meine Frage ist jetzt: Gibt es irgendwo eine gute Anleitung/ein Konzept wie man rausfinden kann, wer wen wo stört und wie man den Code besser entwirren und verstehen kann? Danke!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.11.2015, 18:14
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.949
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Seph Beitrag anzeigen
Als Beispiel:

Ich möchte ein Bild verändern und habe zwei Artikelayouts.

Der eine selector lautet:

.single page .the-content img {...}

Der zweite lautet:

.longform-post .the-content img {...}

In dieser Situation habe ich das Problem, dass der erste Selektor mir immer die Styles vom zweiten überschreibt.
Das sollte nicht sein, das sind zwei unterschiedliche Selektoren.

Noch ein Nachtrag:Bist du sicher, dass die Schreibweise des ersten richtig ist?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.11.2015, 10:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Irgendwas stimmt an deiner Frage nicht.

Der erste Selektor hat eine höhere Spezifität als der zweite, deshalb überschreibt er diesen.

Warum?

Der erste Selektor besteht aus zwei Klassen und zwei Typselektoren, der zweite dagegen hat einen Typselektor weniger.
Mit Zitat antworten
  #4 (permalink)  
Alt 16.11.2015, 10:56
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.949
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von dazzle89 Beitrag anzeigen
Der erste Selektor besteht aus zwei Klassen und zwei Typselektoren, der zweite dagegen hat einen Typselektor weniger.
Das ist meines erachtens ein Tippfehler. Deshlab hatte ich auch gefragt ob der erste Selektor richtig ist.
Mit Zitat antworten
  #5 (permalink)  
Alt 16.11.2015, 12:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.03.2015
Beiträge: 43
Seph befindet sich auf einem aufstrebenden Ast
Standard

Der erste sollte .single-page heißen, sorry.

Und ja, ich habe sicherlich iwo einen Denk- oder Logikfehler drin, irgendwas, was ich noch nicht kapiere. Daher frage ich ja ob es ein Tool gibt, welches die Regeln transparenter macht, damit ich es nachvollziehen kann. Nur mit dem Chrome-Tool komme ich nicht wirklich weiter. Ich habe eigentlich permanent irgendwelche Situationen wo ich !important nutzen muss, damit sich eine Regel durchsetzt, meistens im Kontext von Font-Familys, Font-Größen und Font-Weight.
Mit Zitat antworten
  #6 (permalink)  
Alt 16.11.2015, 12:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.072
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

!important ist so ziemlich die überflüssigste CSS-Anweisung wo gibt. Die sollte überhaupt nicht verwendet werden oder nur zum Testen von CSS-Anweisungen.

Zitat:
Ich habe eigentlich permanent irgendwelche Situationen wo ich !important nutzen muss
Das deutet darauf hin dass du den HTML-Quelltext und / oder das CSS unsinnig aufbaust oder die sogar Fehler enthalten. Um so etwas zu vermeiden muss man sich eigentlich nur an die Grundlagen von HTML und CSS halten.

Zitat:
Nur mit dem Chrome-Tool komme ich nicht wirklich weiter.
Hast du mal Firefox und dessen Tool ausprobiert? Die zeigen zwar das gleiche an, aber vielleicht erscheint dir das vom Firefox übersichtlicher.

Gruss

MrMurphy

Geändert von MrMurphy (16.11.2015 um 12:49 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 16.11.2015, 12:48
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Ich finde es schwer hier eine allgemein Regel zu formulieren..

Das kommt halt immer auf das jeweilige Projekt an. Auf das HTML, die Klassen, das CSS....

Ich selbst benötige nur selten !important. In Fällen wie deinem, wo ein Selektor aufgrund der Reihenfolge in der CSS-Datei überschrieben wird, würde ich versuchen den Selektor durch z.B. eine weitere Klasse zu verfeinern, sofern es in deinem Fall möglich ist.

Ich wüsste nun keine Anleitung für das was du suchst, aber vielleicht hilft es dir weiter wenn du mal nach "CSS Spezifität" oder so googlest.

Edit: Spielt es bei deinem Beispiel überhaupt eine Rolle, ob sich die Regeln gegenseitig überschreiben? Du sprichst doch sowieso jeweils ein eigenes Artikellayout an.

Geändert von dazzle89 (16.11.2015 um 12:51 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 16.11.2015, 12:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.03.2015
Beiträge: 43
Seph befindet sich auf einem aufstrebenden Ast
Standard

Eine Anmerkung: Ich programiere keine eigene Seite, sondern überschreibe nur per Child-Theme bestehende CSS-Regeln eines Wordpress-Themes, das eine riese Codebasis hat. Ich finde es daher nicht so schlimm wenn ich ab und an !important einsetze, aber ich möchte ja besser werde und lernen. Daher die Frage nach einem Tool, dass Regel-Verwirrungen übersichtlich darstellt. In den Browser-Tools sehe ich nur lauter durchgestrichene Linien.

@dazzle Leider ja. Die obere Regel überschreibt, wie das img in der unteren Regel sitzt. Ich adaptiere dann den Code der unteren Regel anhand der oberen.
Mit Zitat antworten
  #9 (permalink)  
Alt 16.11.2015, 12:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Also wie schon gesagt, wenn möglich würde ich statt !important versuchen, eine Regel anderweitig zu überschreiben.

Hast du auch eine genaue Vorstellung, was das Tool machen soll? Also inwiefern es dein Chaos "übersichtlich darstellen" soll?

Das einzige Tool das ich auf die Schnelle finden konnte ist dieses:

https://jonassebastianohlsson.com/specificity-graph/
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.11.2015, 13:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.072
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Daher die Frage nach einem Tool, dass Regel-Verwirrungen übersichtlich darstellt.
Es gibt kein Tool das fehlendes Wissen ersetzt. Das Tool vom Firefox (Element untersuchen) ist inzwischen so übersichtlich und ausgereift, dass andere in der Regel überflüssig sind.

Zitat:
Ich finde es daher nicht so schlimm wenn ich ab und an !important einsetze, aber ich möchte ja besser werde und lernen.
Warum dann die Frage? Du merkst doch offensichtlich selbst dass du dir damit mehr Probleme schaffst als du löst.

Zudem sind die Tools, welche die CSS-Regel auf die eine oder andere Art anzeigen, keine Lernprogramme, sondern gehen davon aus, dass der Anwender über ein bestimmtes Grundlagenwissen von HTML und CSS verfügt.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
rahmen um bilder- was mache ich falsch? R0sa CSS 3 19.11.2012 17:35
Myspace problem... Rechte Säule verschiebt sich im IE. calledmarcel CSS 1 27.02.2009 10:12
Float-Reihenfolge? wolf1985 CSS 0 21.08.2008 02:35
Float - Probleme wolf1985 CSS 5 19.08.2008 09:14
Footer left und right Probleme... wolf1985 CSS 2 14.08.2008 14:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:44 Uhr.