Es gibt zwei Arten von HTML
- HTML, das Vorlagen ausmacht
- 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.)

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-rightfü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!
Verwerfen Sie HTML-Elemente, die CSS im Inhalt erfordern, dann vollständig? Sicherlich ist eine solche Regel eher die Ausnahme als die Regel. Sie begünstigt Websites, die Bilder für grafisch interessantere Elemente verwenden, und könnte das zugängliche Web beeinträchtigen.
Ich denke, mein Weg ist einfacher. Inhalte migrieren, während ich sie ansehe; ist größtenteils die Aufgabe, die DOM-Ausgabe so zu nehmen, wie sie außerhalb der DB gerendert wird, und sie einer separaten Kopie der DB zuzuordnen. Gut markierte, adressierbare Vorlagen sind hier ein Gewinn!
Sobald Sie es von A nach B haben, können Sie, wenn nötig, Ihre Vorlage komplexer gestalten, über CPT und Shortcodes hinzufügen. Vielleicht zu einer Kategorie hinzufügen (etwas zu den Daten hinzufügen, damit wir wissen, dass es aus Iteration X stammt. (Seien wir ehrlich, es ist tot oder sterbend sowieso, manchmal ist es freundlicher, es zu töten oder zur Überprüfung zu markieren).
Lol, was
Ich habe kein einziges Wort verstanden, das Sie gerade gesagt haben.
Ich habe Sie nach dem ersten Absatz verloren. Was meinen Sie, Lewis?
Ich gehöre zu der Gruppe, die seit etwa 15 Jahren Websites baut und durch die Lektüre von Zeldmans Klassiker vor etwa 10 Jahren stark verbessert wurde. Dank dieses Buches schienen wir alle eine grundlegende Wertschätzung für semantische Auszeichnung, die Trennung von Stil und Inhalt und das Schreiben von CSS entwickelt zu haben.
Ist diese Lektion für die jüngere Generation verloren gegangen, und „professionelle Front-End-Entwickler“ verwenden einfach riesige komplexe Bibliotheken, ohne viel von den grundlegenden Grundlagen zu verstehen? Bis zu dem Punkt, dass sie wissen, was „float: left“ oder display: inline-block“ bedeutet?!
Z.B. „@jensimmons, hören Sie auf, JavaScript, Bootstrap/Foundation für Layout zu verwenden. Verwenden Sie einfaches CSS. Halten Sie es einfach!“ https://twitter.com/RaineDe/status/705772029832732672
Ich nehme an, die erste Welle derjenigen, die eine Technologie verwenden (oder erfinden), muss bedenken, dass die nächste Welle sie nicht so lernen (oder erfinden) konnte, wie sie es taten, und dadurch nicht das tiefe Verständnis der Grundlagen hat, das wir für selbstverständlich halten.
Verdammt! Das ist ärgerlich, denn jetzt sind wir wohl verpflichtet, sie zu unterrichten :\
Ich stimme zu, dass Klassen im Inhalt im Allgemeinen schlecht sind, aber wir sind auch auf eine Weise gefangen mit WYSIWYG-Editoren.
Das Ausrichtungsproblem ist das größte. Ich möchte KEINE Inline-Stile für Links-/Mittel-/Rechtsausrichtung verwenden. Also sind wir gezwungen, Klassen dafür zu verwenden.
Seitdem ich an kundengesteuerten Websites arbeite, bin ich nur auf ein Szenario gestoßen, in dem die Verwendung von Klassen im Inhalt benötigt wird und tatsächlich hilfreich ist.
Es gibt ein sehr großes Unternehmen, für das ich die technische Arbeit geleistet habe, um die Website zu erstellen. Und die Designagentur hatte viele formatierte Inhalte. Dinge wie Boxen in Boxen mit verschiedenen stilisierten Listen in jeder unterschiedlichen Box. Sie bekamen einen Haufen Geld dafür, dieses Design zu erstellen, also ist das der einzige Grund, den ich mir vorstellen kann, warum sie das tun mussten.
Betrachten Sie nun den Versuch, den Inhaltserstellern (oft Sekretärinnen oder andere Nicht-Web-Büroangestellte) mitzuteilen, Dropdown-Menüs auszuwählen, um Dinge zu stylen. Oder durch komplizierte Hürden jeglicher Art zu springen, um eine Box zu stylen und dann sicherzustellen, dass der richtige Stil für die Liste in dieser Box verwendet wird, nur um die Designvorgaben der Designagentur zu erfüllen. Igitt.
Also habe ich HTML-Snippet/Vorlagen erstellt, die der WYSIWYG-Editor als Ganzes einfügte. Dann geht der Inhaltsersteller nur herum und ersetzt den Text, wo nötig.
Wird das auf Dauer ein CSS-Alptraum sein? Ich glaube nicht. Der Grund dafür ist, dass bis diese Stile überprüft werden, dies ohnehin im Rahmen einer kompletten Website-Neugestaltung geschehen wird.
Aber für Inhalte, die lange bestehen bleiben, wie ein Blog, bei dem der Inhalt bei einem Designwechsel nicht überarbeitet wird. Ich stimme zu, Klassen wären ein unordentliches Problem.
Aber wenn man bedenkt, dass eine einfache SQL-Abfrage alle Ihre Verwendungen einer Klasse ziemlich leicht finden kann, ist es vielleicht gar nicht so schlimm, wenn es wirklich, wirklich hilft, ein kompliziertes oder schwieriges Problem zu lösen.
Das wäre nun der perfekte Moment für ein CCK-gesteuertes CMS. Wenn Sie die gesamte Auszeichnung in Ihrer Vorlage belassen, tippen Sie und Ihre Benutzer nur Inhalte (C) ein. Mit vielen Inhaltsblöcken erstellen (C) Sie Ihre Seite. Solche Kits (K) sind unter den bekannten CMS weit verbreitet, und es gibt absolut keine Notwendigkeit, Markdown oder eine andere Dokumentensprache zu verwenden, um Ihre Inhalte zu speichern.
Natürlich erfordert ein CCK eine detaillierte Content-Strategie, bietet Ihnen aber viele Vorteile
– Flexibilität (Sie können jederzeit neue Inhaltsblöcke zu bestehendem Inhalt hinzufügen)
– Stabilität (Ihr Design liegt in Ihrer Hand und nicht in der eines unvorhersehbaren WYSIWYG-Editors).
– Konvertierung (verwenden Sie denselben Inhalt für verschiedene Ausgaben oder Layouts)
– Sicherheit (es ist einfacher, Ihre Rohinhalte in die Zukunft zu sichern, wenn Sie nicht später nach Klassen oder Tags suchen müssen)
Nur meine zwei Cents
Bernhard
Genau! Inhalte müssen auf allen außer den einfachsten Websites strukturiert sein. Ich gebe meinen Redakteuren einen einfachen WYSIWYG, der semantische Auszeichnungen ermöglicht. Der Rest wird mit zusätzlichen Feldern und leistungsstarken Vorlagen erstellt.
Advanced Custom Fields WordPress-Plugin, mehr muss nicht gesagt werden – http://www.advancedcustomfields.com/
Sie sollten in WordPress niemals nur ein einziges WYSIWYG-Feld haben. Das zwingt Sie, Layout hineinzustopfen.
Das ist eine ziemlich drastische Aussage. Leider leben viele von uns in einer Welt, in der ein Kunde gelegentlich eine einfache Möglichkeit haben möchte, eine Liste zu erstellen oder etwas zu kursivieren, ohne zuerst HTML lernen zu müssen.
Es scheint eine allgemein anerkannte Teilung in der CMS-Welt zwischen dem, was dieser Artikel ausdrückt (Seiteninhalt über einen riesigen Inhaltseditor/Feld, wo es rein Inhalt ist und keine Klassen oder Ähnliches) und „strukturierterem“ Inhalt über benutzerdefinierte Felder/Abschnitte/etc. (z. B. der „Advanced Custom Fields“-Ansatz für Content-Management in WP).
Beide Ansätze scheinen ihre Nachteile zu haben (Inhaltsersteller müssen beim Erstellen/Bearbeiten zwischen verschiedenen Feldern wechseln, der Inhalt wird in mehreren Datenbanken oder flachen Feldern gespeichert, was Website-Migrationen schwierig machen kann, etc.) und Vorteile (viel leistungsstarkes Vorlagenpotenzial, kein schlecht formatierter strukturbedingter HTML aus einem riesigen WYSIWYG-Feld, etc.).
Probieren Sie jetzt Folgendes: Gehen Sie zu Medium, erstellen Sie ein Konto und erstellen Sie einen Entwurf eines Beitrags, um deren Inhaltseditor zu erleben. Er ist erhaben. Wirklich das Beste aus beiden oben genannten Welten. Inhaltsersteller/Redakteure haben eine einzige, vereinte, majestätische Erfahrung bei der Inhaltserstellung. Entwickler/Designer haben magische Kräfte, um mit diesem Inhalt auf überaus mächtige Weise zu arbeiten.
Nur ein Gedanke.
Ist das nicht das, worüber Google-Entwickler wie Jens Meier seit Jahren schreiben? Jeder sollte das jetzt wissen, und trotzdem können sich die sogenannten Experten nicht davon abhalten, HTML zu kontaminieren – schlimmer noch, andere anzuschreien, ihren Code ebenfalls zu kontaminieren, oder tausend Jahre hinterher zu sein und ihre Weisheit als ihr eigenes zu verkaufen.
Bearbeitung: Z.B. http://meiert.com/en/blog/20140722/docs-and-apps/. Halten Sie es einfach.
Snook
Ich hatte im Herbst ein paar Kurse für Content-Strategie und wurde mit dem Konzept der „Content Types“ vertraut gemacht, die Snooks hier erwähnten „Objekten“ ähneln. Ein großer Teil der CS-Aufgaben, die wir hatten, war die Entwicklung eines Strategiedokuments, das die Content Types, all ihre Teile und welche Art von CMS-„Vorlagen“ (ungenannt und anders als die HTML-Vorlagen, über die Sie sprechen) erforderlich wären, um Autoren die Erstellung und Pflege dieser Typen zu ermöglichen. Ich glaube, wenn wir uns die Zeit nehmen würden, über die Content-Strategie nachzudenken, könnten wir in vielen Fällen die Zustimmung für anmutigere Lösungen erhalten, die den Bedürfnissen der Autoren entsprechen, ihnen aber nicht erlauben, die Designs mit voller WYSIWYG-Kontrolle zu beeinträchtigen.
Eine Möglichkeit, dies in WP zu implementieren, die ich gefunden habe, ist die Verwendung von ACF zusammen mit Shortcodes. Sie erstellen eine Gruppe von Feldern in ACF und eine „Widget“-Datei, die Sie irgendwo im Theme-Verzeichnis ablegen, und eine Shortcode-Funktion, die die beiden zusammenbindet.
Es ist bei weitem keine perfekte Lösung – ich habe darüber nachgedacht, sie in ein Plugin zu verpacken, aber ich sehe keine Möglichkeit, dies zu tun, ohne viel von ACFs Funktionalität zu kopieren oder sich darauf zu verlassen, indem ich Benutzer auffordere, es zu installieren.
Das ist tatsächlich der genaue Ansatz, den wir mit unseren WordPress-Websites begonnen haben – die Verwendung von „Content Objects“ anstelle des Ansatzes mit einem einzelnen Body-Feld und flachen benutzerdefinierten Feldern.
Wir haben ein Tool namens Layout Builder (schamlose Eigenwerbung), das es uns ermöglicht, diese „Content Objects“ (wir nennen sie einfach „Elements“) in Zeilen von Spalten fallen zu lassen.
Basierend auf Snooks Artikel definieren Sie beispielsweise ein „Pull-Quote“-Element
Dann erstellen Sie eine Ansicht dafür
Dann gehen Sie in den Layout Builder, entscheiden, wo Sie ein Pull-Quote einfügen möchten, und legen es dort ab. Füllen Sie den Inhalt aus, füllen Sie einen Untertitel aus (wenn Sie möchten), und es wird angezeigt (WYSIWYG). Wenn Sie mit dem Ergebnis zufrieden sind, speichern Sie das „Layout“ und fügen dieses in Ihre Seite/Ihren Beitrag/Ihren Artikel/was auch immer ein.
[layout slug=example]
Das löst auch das gesamte Problem mit verschiedenen Bildschirmgrößen, da die Spalten im Layout Builder auf einem responsiven Raster basieren, genau wie Ihr Frontend. What you see is what you get – wenn Sie Ihre Seite auf einem kleineren Bildschirm überprüfen möchten, verkleinern Sie einfach die Layout Builder-Oberfläche.
Falls Sie mit der Idee experimentieren möchten, führen Sie
public/example/builder.php(siehe hier) aus – es gibt keine Abhängigkeit von einer Datenbank oder einem CMS, es ist nur eine eigenständige Demo.Sehr wahr! Vorlagen sind einfach zu ändern. Inhalt normalerweise nicht.
#Kommentar
{ ein sehr guter Beitrag;
}
Ja, toller Beitrag