Das CSS-Zen-Garden-Projekt

• CSS Zen Garden ist ein Projekt, das die Schönheit CSS-basierter Gestaltung zeigt
• Das HTML bleibt unverändert, und durch das Ändern allein der externen CSS-Datei lassen sich unterschiedliche Designs erleben
• Teilnehmende können durch CSS die Kraft des Webdesigns zeigen, Inspiration geben und das Projekt als Lernmaterial nutzen
• Verwendet werden hauptsächlich CSS 1 & 2; CSS 3 & 4 sollten nur eingeschränkt eingesetzt werden
• Eingereichte Designs müssen in verschiedenen Browsern konsistente Ergebnisse liefern und mindestens in IE9+ sowie aktuellen Browsern funktionieren

---

Die Bedeutung von CSS Zen Garden

• CSS Zen Garden ist ein Projekt, das die Kraft von CSS zeigt und Designer sowie Entwickler inspirieren soll
• Das HTML bleibt unverändert, und durch das Ändern allein der externen CSS-Datei lassen sich unterschiedliche Designs erleben
• Dieses Projekt zeigt die Möglichkeiten von CSS und betont die Schönheit des Webdesigns

Teilnahme

• Erforderlich sind ein starkes visuelles Design und CSS-Kenntnisse; auch Anfänger können mit Beispieldateien starten
• Das Stylesheet kann frei angepasst werden, das HTML darf jedoch nicht verändert werden
• Fertige Arbeiten müssen auf einen Webserver hochgeladen und der Link eingereicht werden

Vorteile der Teilnahme

• Mehr Sichtbarkeit, Inspiration für andere und Nutzung als Material, das die erstaunlichen Möglichkeiten von CSS zeigt
• Eine Website, die Webdesigner und Entwickler inspirieren und als Lernmaterial dienen kann

Anforderungen

• Verwendet werden hauptsächlich CSS 1 & 2; CSS 3 & 4 sollten nur eingeschränkt eingesetzt werden
• Es müssen in verschiedenen Browsern konsistente Ergebnisse erzielt werden, und die Designs müssen mindestens in IE9+ sowie aktuellen Browsern funktionieren
• Es müssen originelle Arbeiten eingereicht werden, und das Urheberrecht ist zu respektieren

Urheberrecht und Lizenz

• Eingereichte Grafiken behalten ihr Urheberrecht, und das CSS muss unter einer Creative-Commons-Lizenz bereitgestellt werden
• Das CSS muss geteilt werden, damit andere daraus lernen können

[GN⁺]

Hacker-News-Kommentare

• Bevor CSS aufkam, missbrauchten Webentwickler Tabellenelemente, um Raster zu bauen, und setzten Layouts um, indem sie Bilder zerschnitten und in Tabellen platzierten

  • Es gab Widerstand gegen CSS, und viele Entwickler weigerten sich, CSS zu lernen
  • Es gab das Missverständnis, mit CSS seien nur „langweilige, kastenförmige“ Designs möglich
  • Dave Shea zeigte mit CSS Zen Garden die Möglichkeiten von CSS und räumte mit diesen Missverständnissen auf
  • Er bewies, dass sich mit CSS beeindruckende Designs erstellen lassen, und beendete damit die Debatte

• Die Seite ist alt, aber im positiven Sinne gut

  • Anfang der 2000er war sie ein Auslöser dafür, sich von Microsoft ASP.NET zu lösen und Apps unter Linux zu entwickeln
  • Alex Russell lieferte über Dojo JS neue Impulse und machte die Bedeutung von Tech-News deutlich
  • Verwendet wurde ein Toolkit aus Web.py, HTML, JS und CSS; später kamen jQuery, Backbone, Underscore, React und TS hinzu

• Der zentrale Punkt von CSS Zen Garden war, dass sich durch maximale Nutzung von semantischem HTML Präsentation und Inhalt vollständig unabhängig voneinander betreiben lassen

  • Designs konnten innerhalb der Grenzen von CSS umgesetzt werden
  • Um das Styling zu ändern, musste man oft direkt das DOM anpassen
  • Entscheidungen über Präsentation und Inhaltsstruktur mussten auf HTML- und Javascript-Ebene häufig vermischt werden

• Für jemanden, der CSS durch Zen Garden und Eric Meyer gelernt hat, wirken moderne CSS-Werkzeuge wie Tailwind wie ein Anti-Pattern

• Es war ein Lichtblick in den dunklen Zeiten von Tailwind und CSS-in-JS

  • Wie wichtig CSS Zen Garden vor 20 Jahren war, lässt sich heute nur schwer nachvollziehen

• Alt, aber gut

  • Es bildete eine Grundlage dafür, einkommensschwachen Highschool-Schülern Webdesign beizubringen
  • Die Schüler mussten bei Webdesign-Wettbewerben CSS erklären, und viele gewannen Desktop-Computer
  • Fragen wurden an Dave Shea, Eric Meyer, Andy Budd und andere geschickt, die daraufhin halfen

• Es wurden zwei Designs eingereicht, und noch immer kommen Anfragen zur Wiederverwendung des CSS

• Diese Seite hatte früher großen Einfluss

  • Man konnte CSS und Bilder für denselben HTML-Inhalt einreichen
  • Es gab Designbeispiele, die besonders beeindruckend waren

• Nostalgie … Ich habe CSS Zen Garden geliebt, aber es gehörte zu einer Philosophie aus einer Zeit, in der der Hauptzweck von Websites darin bestand, Dokumente bereitzustellen

  • Eine medienreiche Welt hat diese Vision hinter sich gelassen

• Ich freue mich, CSS Zen Garden auf HN zu sehen

  • Es gibt Unzufriedenheit mit CSS-„Frameworks“ wie Tailwind
  • Tailwind ermöglicht „gut genug“ Ergebnisse, ohne zu lernen, wie CSS tatsächlich funktioniert
  • HTML ist in einen Zustand geraten, in dem es mehr CSS-Klassen als Inhalt gibt
  • Es gibt die Tendenz, Tiefe und Meisterschaft als optional anzusehen