Style-Angabe inerhalb HTML immer zu vermeiden?

[Rolf]

Hallo,
wenn ich in (fast) allen Seiten die Überschrift durch
<h3>... Text ...</h3>
angebe und nur an einer Stelle
<h3 style="color: red;">... Text1 ...</h3>,
ist es dann wirklich sinnvoll, diese style-Angabe zu entfernen und durch eine class- oder id-Angabe zu ersetzen mit der entsprechenden Definition in der CSS-Datei?

[Der-Dennis]

Hey Rolf,

meine persönliche Meinung: Ja! Mittels HTML beschreibst Du die Struktur, mittels CSS das Design (wie Du ja, wie ich Deinem Beitrag entnehme, weißt).
Damit Du Struktur und Design sinnvoll trennen kannst, solltest Du also meiner Meinung nach auch für solche "Kleinigkeiten" eine CSS-Klasse oder -ID verwenden.
Bei einer einzigen Definition erscheint das auf den ersten Blick sicherlich fragwürdig. Denk aber dran, Du wirst sicher später noch Änderungen an den Dateien vornehmen. Und wenn sich das erstmal eingeschlichen hat, machst Du es immer öfter und hast irgendwann überhaupt keinen Überblick mehr, was wo zu ändern ist. Z.B., wenn Du statt rot doch lieber blau als Schriftfarbe hättest. Ich kann da aus Erfahrung sprechen...

Also: Auch, wenn's erstmal sinnlos erscheint, trotzdem mit Klassen oder IDs arbeiten. Das zahlt sich später auf jeden Fall aus. Dann weißt Du, wo Du was zu ändern hast und insgesamt ist's auch logischer.

Gruß, Dennis

[Matthias Apsel]

Om nah hoo pez nyeetz, Der-Dennis!

Also: Auch, wenn's erstmal sinnlos erscheint, trotzdem mit Klassen oder IDs arbeiten.

Möglicherweise ist die rote Überschrift ja nicht ganz willkürlich. Es gibt neben Klassen und IDs noch viele andere Möglichkeiten, ein Element zu selektieren.

Matthias

[Der-Dennis]

Hey Matthias,

Möglicherweise ist die rote Überschrift ja nicht ganz willkürlich. Es gibt neben Klassen und IDs noch viele andere Möglichkeiten, ein Element zu selektieren.

da gebe ich Dir vollkommen Recht. Ich bin aufgrund von Rolfs Post davon ausgegangen, dass diese eine Überschrift (bspw. <h1>) auf jeder Seite des Webangebots immer an der gleichen Stelle ausgezeichnet wurde (z.B. im Header und das HTML drumherum ist auch identisch; außer halt bei diesem einen HTML-Template, sofern es denn eins gibt) und die gleiche Intention (z.B. "Hauptüberschrift") dahintersteckt. Dann sollte man - meiner Meinung nach - Klassen oder IDs verwenden (Einschränkung: Wenn natürlich jede Seite des Webangebots eine andere CSS-Datei verwendet, natürlich nicht), um das gewünschte Aussehen hinzubekommen.

Wie gesagt: Habe andere Möglichkeiten nicht bedacht; daher: guter Einwand.

Gruß,
Dennis

[Rolf]

Hallo Matthias,

Möglicherweise ist die rote Überschrift ja nicht ganz willkürlich. Es gibt neben Klassen und IDs noch viele andere Möglichkeiten, ein Element zu selektieren.

Was ist darunter zu verstehen?
Gruß
Rolf

[Gunnar Bittersmann]

@@Rolf:

nuqneH

Es gibt neben Klassen und IDs noch viele andere Möglichkeiten, ein Element zu selektieren.

Was ist darunter zu verstehen?

Selektoren. Auf gut deutsch im Wiki.

Qapla'

[Encoder]

ist es dann wirklich sinnvoll, diese style-Angabe zu entfernen und durch eine class- oder id-Angabe zu ersetzen mit der entsprechenden Definition in der CSS-Datei?

Wenn es nur die eine Stelle ist würd ich sagen nein.
Man erkennt schnell die Vorteile einer zentralen Styledatei. Aber wenn es nur eine wirklich einzige Ausnahme ist, erkennt man auch die Vorteile der direkten Definition.
Ich weiß das sehen hier viele anders. Aber ich hab bei sowas einfach keine Lust mich da in zwei Dateien zu tummeln.

Anderes Beispiel: Ich hab mal versucht eine Art Diagramm mit css zu stylen. Wenn man da 12 verschiedene Balken hat und denen durch einen Style irgendwo anders ihre variable Breite geben soll... nene Da wird man ja schon irre wenn man etliche IDs vergeben soll. Und dann noch in eine extra Datei würde die Zusammenstellung der Seite zu sehr verkomplizieren. Man könnts noch in den <style> Abschnitt packen, aber auch das war mir nicht nahe genug am Geschehen.

Für mich gilt: es macht meistens Sinn das auszulagern. Aber eben nicht immer.

[Matthias Apsel]

Om nah hoo pez nyeetz, Encoder!

Anderes Beispiel: Ich hab mal versucht eine Art Diagramm mit css zu stylen. Wenn man da 12 verschiedene Balken hat und denen durch einen Style irgendwo anders ihre variable Breite geben soll... nene Da wird man ja schon irre wenn man etliche IDs vergeben soll. Und dann noch in eine extra Datei würde die Zusammenstellung der Seite zu sehr verkomplizieren. Man könnts noch in den <style> Abschnitt packen, aber auch das war mir nicht nahe genug am Geschehen.

Für mich gilt: es macht meistens Sinn das auszulagern. Aber eben nicht immer.

Manchmal geht es auch effektiv nicht. (Feriendichte) Die bunte Karte, die beim hovern erscheint, entsteht durch die Überlagerung von 16 Hintergrundbildern. Das war sinnvoller als 3^16 Klassen zu vergeben.

Matthias

[Gunnar Bittersmann]

@@Encoder:

nuqneH

Wenn es nur die eine Stelle ist würd ich sagen nein.

Doch, denn die Angabe, dass die Überschrift rot sein soll, hat im Markup nichts zu suchen.

Nur die Angabe, dass die Überschrift anders sein soll und warum.

Qapla'

[Steel]

Hi!

Ach. Das kommt drauf an, finde ich. Muss jeder für sich selbst entscheiden.

Wenn Du die Dokumente gar nicht gestaltest is eine extra CSS-Einbindung vielleicht unpraktisch, aber das dürfte ja die Ausnahme sein. Da finde ich inline Styles unangebracht. Wenn Du nur kurzfrisitg eine bestimmte Änderung möchtest macht ein schnell eingefügter temporärer inline Style durchaus Sinn, finde ich. Vor allem wenn man die höhere Spezifität bedenkt. Auch temporäre Seiten oder Inhalte setze ich gern mal mit inline Styles um.

[Rolf]

Hallo,
wenn eine Style-Angabe immer für ein bestimmtes Element gilt, so kann ich auch einen bestimmten class-Namen ausdenken.
Welchen Namen aber vergebe ich, wenn z.B. 10 unterschiedliche Elemente immer mal wieder "margin-left: 2em;" als Style-Attribut haben?
10 verschiedene class-Angaben mit dem selben Attribut oder ein einziges mit einem Namen der Art "LinkerAbsatz"?

[Matthias Apsel]

Om nah hoo pez nyeetz, Rolf!

wenn eine Style-Angabe immer für ein bestimmtes Element gilt, so kann ich auch einen bestimmten class-Namen ausdenken.

Das ist falsch.

Wenn eine style-Angabe für ein bestimmtes Element gilt, so verwendest du den Typ-Selektor. Eine Klasse kannst du auch für unterschiedliche Elemente verwenden. Zum Beispiel kann es strong-Elemente und span-Elemente einer Klasse "warnung" geben, die im CSS mit dem Klassenselektor angesprochen werden.
.warnung {color: red;} sorgt dafür, dass sowohl die span-, als auch die strong-Elemente eine rote Schriftfarbe bekommen. Wenn es jetzt auch noch Absätze der Klasse "warnung" gibt, die zusätzlich einen roten Rahmen bekommen sollen, könntest du p.warnung {border: 2px solid red;} deklarieren, sollen Sie statt rot die normale Textfarbe erhalten, zusätzlich p.warnung {color: inherit;}.

.warnung { color: red; }  
p.warnung { color: inherit; border: 2px solid red;}

Welchen Namen aber vergebe ich, wenn z.B. 10 unterschiedliche Elemente immer mal wieder "margin-left: 2em;" als Style-Attribut haben?
10 verschiedene class-Angaben mit dem selben Attribut oder ein einziges mit einem Namen der Art "LinkerAbsatz"?

Vielleicht haben alle diese Elemente eine inhaltliche(!) Gemeinsamkeit, das wäre dann der Klassenname. Und wenn es halt wirklich nur aus gestalterischen Gründen ist, dann eben class="linker_Einzug" o.ä.

Mach dir den Unterschied zwischen Klassen- und Typselektor klar.

Matthias