Vorlagen sind einfach zu ändern. Inhalt normalerweise nicht.

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Es gibt zwei Arten von HTML

  1. HTML, das Vorlagen ausmacht
  2. HTML, das Inhalt ist

Ich habe das Gefühl, dass einige Diskussionen über HTML durch das Nichtbeachten dieser Unterscheidung getrübt werden.

Ich mag zum Beispiel den Ansatz von Harry Roberts für Klassen auf Header-Elementen. Harry sprach von „Apps“, also war es vielleicht impliziert, aber lassen Sie uns einen Punkt darauf setzen: Diese Klassen sind für Header in HTML-Vorlagen und nicht für HTML-Inhalte.

(Dies ist nur ein kleines zufälliges Beispiel, das mir einfiel, dieses Konzept ist breit anwendbar.)

WordPress wird hier als Beispiel verwendet, aber jedes System aus Inhalten und Vorlagen gilt.

Wenn es sich um einen HTML-Schnipsel handelt, der in eine Datenbank gelangt, ist es Inhalt

Es ist nicht *unmöglich*, Inhalte zu ändern, aber es ist wahrscheinlich viel schwieriger und gefährlicher.

Websites können lange bestehen. Inhalte wachsen und wachsen. Zum Beispiel gibt es auf CSS-Tricks 2.260 Beiträge und 1.369 Seiten. Über die Jahre habe ich hier und da Klassen für bestimmte stilistische Zwecke eingefügt, und im Laufe der Zeit bedauere ich es immer.

Warum die Reue über Klassen im Inhalt?

Vielleicht stellt man fest, dass man die Klasse falsch benannt hat und beginnt, sie zu hassen.
Vielleicht ändert man die Klasse in etwas, das einem besser gefällt.
Vielleicht hört man auf, diese Klasse zu verwenden.
Vielleicht vergisst man, dass diese Klasse überhaupt existierte, und berücksichtigt sie bei einem Redesign nicht.
Vielleicht benutzt man den alten Namen wieder, nur dass er jetzt etwas Neues tut und alte Inhalte durcheinanderbringt.

Das sind nur einige Möglichkeiten.

Aber der Schmerz kommt, wenn man sich entscheidet, alte Inhalte „reparieren“ zu wollen. Was tut man? Findet man alle alten Inhalte, die diese Klassen verwenden, und bereinigt sie? Versucht man, eine Datenbankabfrage auszuführen, um Klassen zu entfernen? Mühsame oder gefährliche Arbeit.

Inhalt in Markdown hilft

Markdown ist angenehm zu schreiben, wenn man sich einmal daran gewöhnt hat. Aber sein bestes Merkmal ist, dass es keine Klassen auf dem generierten HTML platziert oder Ihnen sogar erlaubt, welche zu platzieren. Es sei denn, Sie schreiben HTML direkt in Markdown, was sich immer ein wenig schmutzig anfühlt (wie es sein sollte).

Inhalte stylen

Wie stylt man dann den Inhalt ohne Klassen? Hoffentlich ist der Inhalt ziemlich konsistent gestylt. Sie können Stile auf Inhalte anwenden.

.content h2 { }
.content figure { }
.content table { } 

Sagen wir, Sie benötigen unbedingt verschiedene Variationen von Dingen im Inhalt

Wenn Sie die „Regel“ „keine Klassen im Inhalt“ brechen müssen, können Sie vielleicht trotzdem mit Bedacht vorgehen, wie Sie damit umgehen.

  • Wenn Sie ein CMS verwenden, hat es möglicherweise einige Standardklassen, die wahrscheinlich bestehen bleiben. Zum Beispiel gibt WordPress Klassen wie align-right für Bilder aus, wenn Sie diese auswählen.
  • Können Sie den Inhalt so einfügen, dass er nicht nur Teil eines „Blob“ von Inhalt ist? Wie ein benutzerdefiniertes Feld?
  • Können Sie den Inhalt über eine Abstraktion einfügen? In WordPress-Sprache, wie ein Shortcode? [table data="foo" style="bar"]
  • Wenn Sie eine Klasse verwenden müssen, können Sie sie dann so benennen, dass sie sich als ewig haltbar anfühlt?

Vorlagen sind einfach zu ändern

Dafür sind sie da! Wahrscheinlich haben Sie eine Handvoll Vorlagen im Vergleich zu der Anzahl von Seiten, die sie generieren. Ändern Sie sie, und alle Inhalte, die sie verwenden, werden aktualisiert. Das HTML, das den Inhalt umgibt, enthält alle nützlichen Klassen, die Sie verwenden.

Also

  • HTML für Vorlagen = Klassen, yay!
  • HTML für Inhalte = halten Sie es roh!