Schriften formatieren - Der elegante Weg?!

[Jörg Reinholz]

Moin!

1. Der Ansatz mit den Klassen geht schon in die richtige Richtung.
2. Falsch ist es aber den Klassenname auf die Formatierung zu beziehen. Richtig ist es, den Klassenname auf den Inhalt zu beziehen.
3. Drei Absätze in drei Farben sind aus gestalterischer Perspektive schon mal Mist.

Ich nehme mal einen Artikel aus dem Bereich des Journalismus:

Einführende Literatur

Demnach besteht ein Artikel aus:

• Überschrift
• Wichtigstes
• Quelle
• Einzelheiten

Das fasse ich jetzt mal wie folgt zusammen:

• Überschrift
• Kernmeldung + Quelle
• Einzelheiten.

Ok: Beispiel:

Sack Reis in Norkorea umgefallen

In Nordkorea, genauer in der Provinz Kan Ku, ist an gestrigen Mittwoch ein Sack Reis umgefallen, meldet "Chinas letzte Wahrheit". Die Verluste belaufen sich auf ca. 25 Kg, Menschen kamen, abgesehen von dem wegen Verletzung seiner Dienstpflichten erschossenen Verantwortlichen, nicht zu Schaden.

Reis ist das Haupternährungsmittel der Bevölkerung Nordkoreas. Aus der Meldung, dass ein Sack Reis umfallen konnte, wird geschlossen, dass es noch welchen gibt. nach deutschem Lebensmittelrecht gelten Reiskörner, die aus dem Sack gefallen sind, nicht mehr als verzehrbar, was in Nordkorea anders sein kann.

(Blubber, Blubber, Blubber)

Jetzt formatiert:

<h1>Sack Reis in Norkorea umgefallen</h1>
<p class="kern">
In Nordkorea, genauer in der Provinz Kan Ku, ist an gestrigen Mittwoch ein Sack Reis umgefallen, meldet "Chinas letzte Wahrheit".  Die Verluste belaufen sich auf ca. 25 Kg, Menschen kamen, abgesehen von dem wegen Verletzung seiner Dienstpflichten erschossenen Verantwortlichen, nicht zu Schaden.
</p>

<p class="einzelheiten">
Reis ist das Haupternährungsmittel der Bevölkerung Nordkoreas. Aus der Meldung, dass ein Sack Reis umfallen konnte, wird geschlossen, dass es noch welchen gibt. nach deutschem Lebensmittelrecht gelten Reiskörner, die aus dem Sack gefallen sind, nicht mehr als verzehrbar, was in Nordkorea anders sein kann.
</p>

<p class="einzelheiten">
(Blubber, Blahfasel, Blubber)
</p>

Das geht noch ganz anders:

<article>
<header>
<h1>Sack Reis in Norkorea umgefallen</h1>
</header>
<div class="kern">
<p>In Nordkorea, genauer in der Provinz Kan Ku, ist an gestrigen Mittwoch ein Sack Reis umgefallen, meldet "Chinas letzte Wahrheit".  Die Verluste belaufen sich auf ca. 25 Kg, Menschen kamen, abgesehen von dem wegen Verletzung seiner Dienstpflichten erschossenen Verantwortlichen, nicht zu Schaden.
</p>
</div>

<div class="einzelheiten">
<p>
Reis ist das Haupternährungsmittel der Bevölkerung Nordkoreas. Aus der Meldung, dass ein Sack Reis umfallen konnte, wird geschlossen, dass es noch welchen gibt. nach deutschem Lebensmittelrecht gelten Reiskörner, die aus dem Sack gefallen sind, nicht mehr als verzehrbar, was in Nordkorea anders sein kann.
</p>

<p>
(Blubber, Blahfasel, Blubber)
</p>
</div>
</article>

Jetzt würde man

article h1 {;}
article .inhalt {;}
article .inhalt:first-child {}
article .einzelheiten {;}

formatieren. Z.B. um den ersten Absatz stets fett wieder zu geben.

Die Überschriften werden also NICHT als rote Klasse, der Kern nicht als blaue Klasse und die Einzelheiten nicht als grüne Klasse markiert, sondern diese Eigenschaften der Überschrift, dem Kern, den Einzelheiten zugeordnet.

Wenn es dem Verlag gefällt werden die Einzelheiten auf Mobilgeräten (genauer: solchen mit kleinem Bildschirm) nicht mehr angezeigt, es sei denn der Leser tippt nochmal auf "wirklich alles lesen". Vor allem aber: Und wenn es dem Verlag gefällt, dann sind mit einer Änderung im CSS die Überschriften ab 04:45 grün, die Kernmeldung dunkelgrau und die Einzelheiten rot.

Bei Deiner Methode hättest Du jetzt eine Klasse "rot" mit grünem Text - was nicht auf einen "eleganten Weg" hinweist.

Jörg Reinholz