allgemeine Vorgaben, Konzept für Innen- und Aussenabstände, Klassen ... Beispiel gesucht

[michaah]

Hi

Im Groben und weitgehend auch im Detail habe ich meiner WEbsite ein responsives Design verpaßt.

Wie (mangels tagtäglicher Erfahrung) nicht anders zu erwarten ist mein CSS jedoch (noch) recht chaotisch, Klassen, die dann an andere Stelle doch nicht passen und mit der Zeit in mehreren Alternativen erstellt wurden, und dann doch nur ein oder zweimal Verwendung finden. Oder besser ein padding des Umgebenden Elements oder ein margin von innen? margin und padding zu Beginn für alle Elemente zurücksetzen oder nicht? In @media-queries eine Klasse umdeklarieren oder das Element individuell überschreiben?

Was ich suche ist eine Art Leitfaden für genau diese Fragen, ein Gedankenrahmen um das CSS möglichst planmäßig zu sortieren.

Bislang besteht mein Plan aus folgendem:

Allgemeine Vorgaben (welche sind heutzutage noch nötig/sinnvoll?)

Klassendefinitionen (mittlerweile bei mir bestimmt zu viele)

Selektoren und individual IDs weitestgehend in der Reihenfolge ihres Vorkommens im html

Im Grunde finde ich das gut so, aber im Detail erscheint mir Vieles planlos. Und die zwei Hauptproblemfelder sind:

• Wann lohnt sich das Erstellen einer Klasse?
• Konzept für (hierachisch verschachteltes) margin und/oder padding

Falls jemand hierzu ein gutes praktisches, möglichst bildhaftes Beispiel aus dem Netz kennt würde ich mich über einen Link freuen.

Gruß

M

PS: Den Designwechsel in vier Stufen vom Ein-Spalten-Design (mobile first) zu Desktop-Design habe ich - zumindest schaut es für mich danach aus - mit jeweils recht wenig Überschreibungen in den @media-queries hinbekommen. Vermutlich kann es auch noch weniger sein, aber es überrascht mich schon wie wenig Anpassung letztlich notwendig ist um die Seite von einem zum anderen design wechseln zu lassen. Hier kann ich soviel nicht falsch gemacht haben.

[Rolf B]

Hallo michaah,

ui, das ist schwerer Tobak.

Der grundsätzliche Unterschied von Margin und Padding ist:

(1) Margins können überlappen. D.h. wenn ich zwei Boxen übereinander habe, und beide haben margin:2em, dann ist der Abstand zwischen den Boxen 2em, nicht 4em.

(2) Margins können über das Parent-Element hinausgreifen. Ich habe bspw. ein figure-Element mit margin:1em und padding:0. Darin ist ein p Element mit margin:2em. Nun kommt es darauf an, ob das figure-Element eine Blockformatierungsumgebung (BFU) aufbaut (siehe MDN, unser Wiki ist da nicht gut bzw. auch falsch bestückt). Mit BFU bleibt der Margin des p Elements in der Figure. Ohne BFU wird das p an den Innenrand des figure gesetzt, sein Margin greift über das figure-Element hinaus und würde ihn in diesem Beispiel vergrößern.

(3) Padding kann zur Größe des Elements gehören (siehe block-sizing Eigenschaft und Jahrzehnte des Quirksmode im Internet-Explorer), Margin nie.

Bestimmt gibt's noch mehr, und genau diese Unterschiede muss man kennen, um zu wissen, ob padding oder margin besser ist. Oft ist es aber auch einfach wurscht.

Rolf

[michaah]

Danke für deine Mühe, sorry to say, das ist aller klar. Ich suche bespielhafte Konzepte, nicht Regeln.

Und im Moment habe ich gaaaaaaaaaaaanz andere Probleme weil ich mir eben mein CSS zerputzt habe und meine history nicht weit genug zurückreicht, es ist zwar nicht der super GAU, aber nahe am GAU.

Jetzt habe ich ca. 10 Baustellen ohne Ahnung wo jeweils der Fehler liegt, solche in der Art das meine CSS Definition für "hr" (ja, das verwende ich an zwei Stellen) schlichtweg unbeachtet bleibt, stattdessen eine Browsereigene reinkickt und ich nun bereits mehr als einen halbe Stunde damit verbringe diese hr irgendwie anzusprechen ... ohne jeden Erfolg

Ja, vor dem Aufräumen Sicherungskopie, Danke, aber jetzt habe ich ander Sorgen ...

Ich habe null Plan wie ich dem nun Herr werden soll, was ist den daran falsch:

 hr						{ height: 2px;
						color: #FFB133;
						border-style: solid;
						background: #FFB133;
						margin: 0 auto 0;
						}

Selbst wenn ich dies explizit mit dem Selektor anzusprechen Versuche den mir der Inspektor anzeigt: main.container > hr.breite ändert sich nichts. Die oben deklarierten Farben sind Orangetöne, die angezeigte Farbe ist aber grau (wie im browser.css), die obigen Deklarationen tauchen im Inspector gar nicht mehr auf und ich habe keinen Plan wie ich den Fehler finden soll. Ich habe das gesamte CSS nach überschreibungen durchsucht und finde nichts ...

Und das ist nur einer von x reingeputzen Fehlern ... ich wollte übezähligen whitespace bereinigen ....

[Tabellenkalk]

Hallo,

main.container > hr.breite

ändert sich nichts.

bist du sicher, dass du in der richtigen Datei änderst und dir die auch anschaust? Hängt da noch ein Cache mitdrin, der die alte Version liefert?

Gruß
Kalk

[michaah]

Definitiv : ja.

Und dennoch getestet.

Und ja, es ist die richtige Datei (und das ist das einzige was wirklich übersichtlich ist, der Ordner in dem dies hier passiert.

[Tabellenkalk]

Hallo,

main.container > hr.breite

Hast du im HTML denn auch die Klasse "breite" für das hr-Element vergeben?

Gruß
Kalk

[Marc]

Hej michaah,

Ich habe null Plan wie ich dem nun Herr werden soll, was ist den daran falsch:

 hr						{ height: 2px;
						color: #FFB133;
						border-style: solid;
						background: #FFB133;
						margin: 0 auto 0;
						}

An dem code ist nichts falsch - der sorgt dafür, dass eine orange Linie angezeigt wird. Wenn das bei dir nicht klappt, ist der Fehler in einer Stelle des CSS, den du hier nicht zeigst (Klammer der letzten Regel nicht geschlossen?)…

Marc (marctrix)

[michaah]

Definitiv keine fehlende Klammer in der vorhergehenden Deklaration.

Nur der Klarheit wegen:

Am html habe ich nicht geputzt, nur CSS.

Vor dieser Säuberungszerstörung funktionierte alles 1.a!

Jetzt habe ich:

• teilweise falsche Abstände,
• teilweise falsch Textfarben,
• keine der @media-queries funktioniert mehr

... was mir aber nun, da ich das so deutlich festgestellt habe mehr Mut als Panik macht, weil das ein bisschen darauf hindeutet (ohhh, hoffentlich kein Wunschdenken) das hier (@media-queries) dann auch der Fehler zu suchen ist?

Mein Putzen bestand ausschließlich im Löschen von whitespace, ja, dass man da ne Klammer zuviel erwischt ist denkbar wenngleich ich sehr vorsichtig war, weil ich erst letztes WE die ganze Nacht wegen einer fehlenden Klammer ..... Leider habe ich nichts womit ich dies per Computer überprüfen könnte (Debian-Linux + bluefish)

[Der Martin]

Hallo M,

Definitiv keine fehlende Klammer in der vorhergehenden Deklaration.

aber wenn eine einzelne CSS-Regel plötzlich nicht mehr angewendet wird, ist der Grund sehr oft ein Fehler in der vorhergehenden Regel, der dazu führt, dass das Ende dieser und damit der Beginn der folgenden Regel nicht mehr richtig erkannt werden kann.

Dasselbe gilt sinngemäß für ganze Regelsätze.

Ich kenne das auch von C: Wenn der Compiler von jetzt auf gleich plötzlich Dutzende von Fehlern ausweist, ist die Ursache meistens eine Kleinigkeit wie etwa eine vergessene Klammer oder ein fehlendes Semikolon.

Jetzt habe ich:

• teilweise falsche Abstände,
• teilweise falsch Textfarben,
• keine der @media-queries funktioniert mehr

Das deutet auf ein sehr allgemeines Problem hin, etwa dass das Stylesheet komplett nicht mehr geladen wird.

... was mir aber nun, da ich das so deutlich festgestellt habe mehr Mut als Panik macht, weil das ein bisschen darauf hindeutet (ohhh, hoffentlich kein Wunschdenken) das hier (@media-queries) dann auch der Fehler zu suchen ist?

Möglich. Solange du dir nicht helfen lassen möchtest, kann man nur raten.

Mein Putzen bestand ausschließlich im Löschen von whitespace

Wozu das? Whitespace lässt sich hervorragend komprimieren, und die meisten Server sind so konfiguriert, dass sie textbasierte Inhalte sowieso gzip-komprimiert ausliefern.

Leider habe ich nichts womit ich dies per Computer überprüfen könnte (Debian-Linux + bluefish)

Sehr viele Editoren bieten die Möglichkeit, (scheinbar!) zusammengehörende Klammernpaare optisch hervorzuheben. So kann man Klammerfehler eigentlich recht schnell entdecken.
Ich bin mir ziemlich sicher, Bluefish kann das auch.

Live long and pros healthy,
 Martin

[michaah]

:-)

Gefunden.

Nur nicht ansatzweise in der Nähe der oben genannten Elemente, weder des "hr" Elements noch irgendeiner @media-query. Einer Deklaration für eine kurzen Text fehlte die schließende Klammer. Und obwohl das Folge-Element ausgegraut war habe ich das Fehlen der Klammer nicht entdeckt ... bis eben.

Falls das hier jemand liest, der unter Linux arbeitet, vielleicht sogar auch mit bluefish ... und der scripten kann, ein script was die geöffneten und die geschlossenen geschweiften Klammern zählt, das wär's. Am bequemsten über die bluefish Werkzeuge aufzurufen ... das wäre sehr hilfreich. Ja, Klammernpaare findet bluefish auch so, aber nur wenn ich die jeweils mit der Maus markiere was sehr unhandy ist ...

Im Moment bin ich erstmal froh, dass der GAU eingebremst werden konnte.

Danke soweit, manchmal hilft es schon allein dass jemand anderes beginnt mitzudenken 😉

Jetzt ist erstmal Abendessen vor dem Aufräumen angesagt.

[Marc]

Hej michaah,

Danke soweit, manchmal hilft es schon allein dass jemand anderes beginnt mitzudenken 😉

Erstaunlich oft findet man den eigenen (Denk-) Fehler schon, wenn man jemand anders erklärt, was man wollte und was man versucht hat. ;-)

Marc (marctrix)

[Der Martin]

Hallo,

Danke soweit, manchmal hilft es schon allein dass jemand anderes beginnt mitzudenken 😉

Erstaunlich oft findet man den eigenen (Denk-) Fehler schon, wenn man jemand anders erklärt, was man wollte und was man versucht hat. ;-)

das kann ich aus jahrzehntelanger Erfahrung bestätigen!

Schon in der Schulzeit habe ich manchmal bei Hausaufgaben in Mathe, Physik oder Chemie meine Mutter gefragt. Nicht weil sie sich in diesen Disziplinen wirklich auskannte - aber sie hat sich auch ohne fundiertes Wissen sehr dafür interessiert.
Und wenn man einem Unwissenden ein Detail erklären will, muss man zwangsläufig etwas ausholen und nachdenken: Wie war das noch gleich? Und dabei kommt man dann oft fast wie von selbst auf die Lösung der eigentlichen Aufgabe.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Marc

Klammer der letzten Regel nicht geschlossen?

Das machen nur Loser^[1]. Wenn man bei der CSS Battle gewinnen will, lässt man die Klammer (und andere unnötige Zeichen) am Ende weg. 🤓

😷 LLAP

---

1. ja, genau die mit einem o ↩︎

[michaah]

@@Marc

Klammer der letzten Regel nicht geschlossen?

Das machen nur Loser[^o].

Wobei ich nun doch ganz froh bin wieder dieser Losergemeinschaft anzugehören.

[Gunnar Bittersmann]

@@Rolf B

Bestimmt gibt's noch mehr, und genau diese Unterschiede muss man kennen, um zu wissen, ob padding oder margin besser ist.

Der erste Unterschied, der mir einfällt: Wenn die Box eine eigene Hintergrundfarbe hat, soll der Rand um den Inhalt mit gefärbt sein (padding) oder nicht (margin)? Oder gar beides?

😷 LLAP

[Matthias Scharwies]

Servus!

(2) Margins können über das Parent-Element hinausgreifen. Ich habe bspw. ein figure-Element mit margin:1em und padding:0. Darin ist ein p Element mit margin:2em. Nun kommt es darauf an, ob das figure-Element eine Blockformatierungsumgebung (BFU) aufbaut (siehe MDN, unser Wiki ist da nicht gut bzw. auch falsch bestückt). ...

Magst Du da schöpferisch tätig werden?

• CSS/Eigenschaften/Abstand/margin#zusammenfallende_Außenabstände

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

OMG, da hast Du (oder sonst jemand) aber so richtig Zeit investiert. Und kein Wort darin über den Block Formatting Context, der dafür doch so wichtig ist.

Mein "teils falsch" bezog sich übrigens auf die Erklärung der display Eigenschaft, wo unter "display:block" steht, dass dadurch grundsätzlich ein BFC entsteht.

Das von Dir verlinkte Erklärungsmonster zur Margins hatte ich bisher noch nicht gesehen. Ich habe das Wiki nicht komplett quergelesen.

Ich werde mir also nochmal die Specs anschauen, dabei hoffentlich keine wichtige übersehen und dann schauen, was ich tun kann.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

OMG, da hast Du (oder sonst jemand) aber so richtig Zeit investiert. Und kein Wort darin über den Block Formatting Context, der dafür doch so wichtig ist.

Mein "teils falsch" bezog sich übrigens auf die Erklärung der display Eigenschaft, wo unter "display:block" steht, dass dadurch grundsätzlich ein BFC entsteht.

Das von Dir verlinkte Erklärungsmonster zur Margins hatte ich bisher noch nicht gesehen. Ich habe das Wiki nicht komplett quergelesen.

Ich auch nicht, :-)

Oft stolpere ich über was Neues (oder vielmehr altes) und setze dann Querverweise.

Ich werde mir also nochmal die Specs anschauen, dabei hoffentlich keine wichtige übersehen und dann schauen, was ich tun kann.

Vielen Dank im Voraus!

Rolf

Herzliche Grüße

Matthias Scharwies