SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

Was ist eigentlich Wiki-Gardening?

Der Begriff stammt aus der Wiki-Welt und beschreibt die kontinuierliche Pflege bestehender Inhalte. Dabei geht es nicht darum, möglichst viele neue Seiten zu schreiben, sondern Vorhandenes zu sichten, zu bewerten und zu überlegen, wie sich Inhalte verbessern lassen:

• aktualisieren, wenn sie nicht mehr dem aktuellen Stand entsprechen,
• ergänzen, aber oft auch kürzen und – wie eine wild gewachsene Hecke – behutsam zurückschneiden,
• umstrukturieren, so wie man eine Pflanze umtopft oder an einen besseren Standort setzt,
• verknüpfen, damit Zusammenhänge deutlicher werden,
• oder aufteilen, wenn ein Thema zu groß geworden ist.

So wächst ein Wiki nicht nur, sondern wird mit der Zeit verständlicher, übersichtlicher und leichter zu pflegen.

Wie sehen eigentlich gute Tutorials aus?

Gute Tutorials führen Schritt für Schritt durch einen Lernweg. Sie beschreiben ein Problem und seinen Lösungsweg oder stellen eine bewährte Vorgehensweise (Best Practice) vor.

Das vorhandene Tutorial hatte den kryptischen Titel „/Größenangaben“ und ein eher referenzartiges Inhaltsverzeichnis.

SELFHTML propagiert die Verwendung von sprechenden Namen bei Variablen und Klassen. Leider werden die historisch gewachsenen Wiki-Strukturen mit der im Jahr 2010 eingeführten Hierarchie diesem Anspruch nicht immer gerecht.

Der neue Name beschreibt das Ziel des Tutorials:

• CSS-Größen verstehen – von px und em bis fit-content

Auch die Kapitelüberschriften beschreiben, was erklärt wird.
In Abgrenzung zu diesem Tutorial dient CSS/Wertetypen als Referenz, in der alle Wertangaben vollständig gelistet sind.

Müsste man da nicht auch gleich ...?

An unserem Mittwochs-Stammtisch kam es bei der Vorstellung des neuen Tutorials gleich zur Frage, wie denn das vorhergehende Kapitel zum Boxmodell aussähe. Dort gab es ein Beispiel, in dem mehrere Blockelemente mit display: inline-block nebeneinander positioniert wurden, um dann festzustellen, dass padding und border ja zur Breite dazugerechnet werden müssen. Anstatt sich auf das Boxmodell zu konzentrieren, wurden mehrere Mehrspaltenlayouts gezeigt und erklärt.
So was macht man heute mit flex!

Ein Sprung zu CSS/Tutorials/Ausrichtung/display (heute: Layout-Verhalten mit display) zeigte, dass einige Stellen seit 2012 nicht mehr bearbeitet wurde. Kein Problem bei Klassikern wie block und inline, schwieriger bei Werten wie run-in, die damals(TM) bald kommen sollten, bis jetzt aber in keinem Browser implementiert sind.

Ist display-inline-block wirklich legacy?

Ja, das bedeutet jedoch nicht, dass er veraltet ist. In der modernen Mehrwortsyntax entspricht er dem Wert inline flow-root.
inline-block ist weiterhin sinnvoll, wenn ein Inline-Element eine eigene Box erhalten soll: Beispielsweise können so Innenabstände in Blockrichtung wirken oder Elemente transformiert werden.
Für größere Layoutaufgaben, bei denen mehrere Blockelemente nebeneinander angeordnet oder ausgerichtet werden sollen, verwendet man heute in der Regel display: flex oder display: grid.

Die entsprechenden Beispiele aus den 2010er Jahren wurden aktualisiert oder depubliziert.

Fazit

Durch die oben beschriebene Sichtung und Überarbeitung konnten viele Tutorials auf das Wesentliche konzentriert und teilweise um bis zu ein Drittel gekürzt werden.

Gleichzeitig sorgen mehr Beispiele und zusätzliche Verlinkungen für einen leichteren Zugang und ein besseres Verständnis der Zusammenhänge.