< Zurück zu den Inhalten

Baseline Patterns

Baseline Patterns Demo Seite

Betrachtet man das Markup populärer Komponenten-Bibliotheken in den Devtools, entsteht der Eindruck, dass es auch für einfache Komponenten bereits sehr komplexe Markup-Strukturen braucht. Das liegt wahrscheinlich daran, dass diese Bibliotheken, auf div oder span-Elemente ohne HTML-Semantik mit aria-Attributen setzen. Außerdem kommt hinzu, dass die Komponenten in den spezifischen Frameworks verfasst wurden und Web Standards wenig Beachtung geschenkt wurde oder diese zum Zeitpunkt der initialen Implementierung noch keine breite Browser-Unterstützung hatten.

Doch das muss so nicht mehr sein! Im baselineweb/patterns Repository habe ich mal einige Patterns mit Best-Practices für Semantik und Barrierefreiheit implementiert und zusammengestellt, die dazu noch auf sehr moderne (und trotzdem sehr nachhaltige) Web-Standard API’s setzen.

Das Ergebnis: Minimaler Code der dadurch leichter erweiterbar ist. Durch die native Ausführung im Browser ist die Performance unschlagbar. Dabei wird außerdem die nötige Zeit für die Implementierung und Wartung reduziert, da keine Dependencies hinzugefügt werden müssen, die kontinuirliche Updates erfordern. Dadurch das die Web Standards und Semantik im Browser nativ unterstützt sind, ist der Code um ein vielfaches länger kompatibel, als bei Komponenten-Bibliotheken die in spezifischen Frameworks verfasst sind. Mir fallen im Grunde keine Nachteile ein, deshalb empfehle ich die Verwendung der Patterns ohne Einschränkungen, wenn die Kompatibilität für die entsprechend verwendeten, nativen Browser-Features, in allen zu unterstützenden Browser-Versionen gegeben sind.

Demo

Auf der baselineweb/patterns Github Page können die vorhandenen, minimal gestylten Patterns als Headless Komponenten in einer Übersicht betrachtet werden.

Vom Pattern zur Komponente

Um aus den im Repository baselineweb/patterns enthaltenen Patterns, eine Komponente zu generieren, nutzt man das gewünschte Pattern mittels Copy & Paste, als Basis für die Implementierung der Komponente. Alternativ gibt es auch die Möglichkeit, eine LLM im Coding Agenten deiner Wahl, mit den entsprechenden Patterns als Basis zu füttern. Wenn man zum Prozess der Komponenten-Implementierung noch einen Screenshot oder einen Design-File ins Coding oder den Prompt (mittels MCP) einbezieht, lassen sich damit schnell und gut sehr flexible, performante Komponenten erstellen, die sich dazu noch, mittels CSS exakt an das gewünschte User-Interace bzw. User-Experience Design anpassen lassen. Sind die Komponenten dann einmal im produktiven Einsatz, muss diese erst beim nöchsten Design-Relaunch wieder angefasst werden, da native Web-Standards über sehr lange Zeiträume kompatibel bleiben.

↑ Nach oben