Schreibe CSS-Semantik einmal.
Lass es auf jedem Framework laufen.
as-cssdo ist ein vorgeschlagener CSS-Abstraktions-Standard. Ein framework-unabhängiger Daten-Vertrag, der semantische Komponenten-Klassen auf jedes CSS-Framework mappt — Bootstrap, Tailwind, Bulma, Foundation und darüber hinaus. Wechsle das Framework. Behalte die Templates.
Diese Seite dokumentiert das Konzept, wie es ursprünglich gedacht war. Es ist eine Pre-Spezifikation — ein Startpunkt für eine Diskussion, kein fertiges Produkt. Die Ideen hier sind bewusst offen gehalten.
Ein Datenobjekt. Jedes Framework spricht es.
Das Problem
Framework-Lock-in
Templates, die Framework-Klassen direkt nutzen, sind eng gekoppelt. Von Bootstrap zu Tailwind zu wechseln heißt, jedes Template, jede Komponente, jede Seite neu zu schreiben.
Kein gemeinsames Vokabular
Jedes Framework hat seine eigene Benennung für dasselbe Konzept. Ein „Primary Button" ist btn btn-primary in Bootstrap, btn-primary in Bulma, eine Utility-Komposition in Tailwind. Es gibt keinen Standard.
Wiederholte Migrationsarbeit
Jedes Projekt, das sein CSS-Framework wechselt, fängt die Migration bei Null an. Dieselben Mapping-Probleme werden immer wieder gelöst, von verschiedenen Teams, auf verschiedene Weisen.
Das Konzept
Ein semantischer Daten-Vertrag
as-cssdo definiert ein Standard-Set semantischer Komponenten-Identifier — button.primary, card.base, alert.warning — und ein strukturiertes Datenobjekt, das jeden Identifier auf seine Implementierung in einem beliebigen CSS-Framework mappt.
Der Vertrag ist der Standard. Die Implementierungen sind Adapter. Frameworks liefern ihren eigenen Adapter — oder die Community tut es.
Framework-Adapter
Jedes Framework hat eine Adapter-Datei, die den Vertrag umsetzt. Framework zu wechseln heißt, einen Adapter gegen einen anderen zu tauschen. Templates verwenden s-btn-primary — nie die Framework-Klasse direkt.
Wie es funktioniert — Schritt für Schritt
Der Vertrag definiert semantische Identifier. button.primary heißt „der Haupt-Call-to-Action-Button" — framework-unabhängig.
Jeder Adapter mappt jeden Identifier auf seine framework-spezifischen Klassen oder Utility-Kompositionen.
Ein Compiler liest Vertrag + Adapter und generiert die CSS-Ausgabe — ein Stylesheet semantischer Klassen, einsatzbereit.
Templates verwenden nur semantische Klassen. Um Frameworks zu wechseln: Adapter tauschen, neu kompilieren. Templates unverändert.
Ecosystem-Fit
AS Starter ist eine Live-Demonstration von as-cssdo in Aktion. Seine semantische Ebene (s-*-Klassen) folgt dem as-cssdo-Vertrag, aktuell auf Bootstrap gemappt. Es beweist, dass das Konzept in einer Produktionsanwendung funktioniert.
as-cssdo lebt unter dem assist-series-Ökosystem — unabhängig, offen für Beiträge, aber gestützt durch eine funktionierende Implementierung. assist-series liefert die Infrastruktur und die Glaubwürdigkeit.
Die Langzeit-Vision: Framework-Autoren tragen bei und pflegen ihren eigenen Adapter. Teil des as-cssdo-Standards zu sein heißt, dass ihr Framework für jedes Projekt zugänglich ist, das den Vertrag nutzt.
Roadmap — vom Konzept zum Standard
Proof of Concept
- Das semantische Identifier-Set definieren
- Bootstrap-Adapter — vollständiges Mapping
- Compiler-Prototyp
- Live-Demo über as-starter
Multi-Framework
- Tailwind-Adapter
- Bulma-Adapter
- Adapter-Beitragsleitfaden
- Dokumentations-Site
Community
- Open-Source-Release
- npm-Paket
- Ansprache der Framework-Autoren
- Versionierte Standard-Spezifikation
Standard
- Framework-Autoren pflegen Adapter
- IDE-Tooling
- Build-Tool-Integrationen
- as-cssdo-Spezifikation v1.0
Offene Fragen
Das ist eine Pre-Spezifikation. Die folgenden Fragen bleiben bewusst offen — sie definieren die Diskussion, nicht die Antwort.
Interesse an dieser Idee?
Das Konzept ist in seiner frühesten Phase. Wenn du an einem CSS-Framework arbeitest, Entwickler-Tools baust oder einfach die Idee verfolgenswert findest — melde dich. Der Standard wird von den Leuten geformt, die ihn nutzen.