Matcha.css – eine Drop-in-Bibliothek für semantisches Styling mit reinem CSS

 (matcha.mizu.sh)
4 Punkte von GN⁺ 2024-05-25 | 1 Kommentare | Auf WhatsApp teilen
  • matcha.css gestaltet HTML-Elemente sofort wie ein standardmäßiges Browser-Stylesheet und reduziert manuellen CSS-Aufwand bei schnellem Prototyping, statischem HTML und aus Markdown erzeugten Dokumenten
  • Die Einbindung erfolgt ohne Build-Schritt, Abhängigkeiten, JavaScript oder Konfiguration mit nur einer Zeile <link>; die Standardgröße beträgt komprimiert per gzip etwa 8,81 kB
  • Mithilfe von Dokumentstruktur und semantischen Elementen lassen sich Funktionen wie ``-Untermenüs, die Kennzeichnung erforderlicher Eingaben mit * und Rahmenfarben je nach Eingabevalidierung allein per CSS umsetzen
  • Es gibt die Presets Default, Lite, Utility classes und Istanbul coverage sowie einen custom builder; außerdem lassen sich einzelne Style-Verzeichnisse direkt laden
  • Das Open-Source-Projekt steht unter der MIT-Lizenz; Utility-Klassen und Layout-Funktionen sind praktisch, entfernen sich aber vom semantikbasierten Einsatz, weil sie Klassen im Dokument erfordern

Drop-in-CSS, das HTML-Dokumente sofort gestaltet

  • matcha.css ist eine Drop-in-Bibliothek, die HTML-Elemente mit reinem CSS stylt
  • Der Fokus liegt darauf, HTML-Elemente ansprechend darzustellen, ähnlich wie ein standardmäßiges Browser-Stylesheet, ohne dass Nutzer ihre Dokumente direkt anpassen müssen
  • Geeignet ist es für schnelles Prototyping, statische HTML-Seiten, aus Markdown erzeugte Dokumente und Entwickler, die die gesamte Bandbreite von HTML-Elementen nutzen möchten, ohne sich tief mit CSS-Details zu beschäftigen
  • Auch diese Seite selbst ist mit matcha.css gestaltet

Mit einer Zeile einführen und leicht wieder entfernen

  • Es lässt sich ohne Build-Schritt, Abhängigkeiten, JavaScript, Konfiguration oder Refactoring des Dokuments verwenden
  • Die Standard-Build-Größe beträgt komprimiert mit gzip ~8.81kB
  • Es wird aktiv, wenn im `` des Dokuments die folgende Zeile ergänzt wird
  • Auch das Entfernen ist einfach: Man nimmt den entsprechenden `` wieder heraus; es wurde so entworfen, dass kein Refactoring oder Aufräumen des Dokuments nötig ist
  • Die Assets werden auf Vercel gehostet und sind auch über JSdelivr verfügbar, einen CDN-Dienst für veröffentlichte npm-Pakete
  • Alle öffentlichen Versionen werden im Verzeichnis /v/ bereitgestellt; standardmäßig wird der Branch main ausgeliefert

Styling auf Basis semantischer Struktur

  • matcha.css passt Styles anhand der Dokumentstruktur und der Elementhierarchie an

  • Beispiele für automatische Funktionen

    • Werden ``-Elemente verschachtelt, entsteht ein implizites Untermenü
    • Wird zusammen mit verwendet, wird die Kennzeichnung für Pflichtfelder * automatisch ergänzt
    • [data-color-scheme="light"] erzwingt den hellen Modus, [data-color-scheme="dark"] den dunklen Modus
    • [data-color-scheme] kann auf einzelne Elemente angewendet werden, um das Farbschema selektiv zu erzwingen
    • :root setzt CSS-Variablen, und @media (prefers-color-scheme) wählt den Modus gemäß den Benutzereinstellungen
    • Da keine !important-Regeln verwendet werden, lassen sich Styles bei Bedarf leicht überschreiben

Optionen für Build und Auslieferung

  • Zusätzlich zum Standard-Build gibt es Preset-Builds für verschiedene Zwecke
    • Default ~8.81kB: sämtliches semantisches Styling und Zusatzfunktionen außer @istanbul-coverage
    • Lite ~5.59kB: sämtliches semantisches Styling, @break-words, @discrete-scrollbars
    • Utility classes ~3.43kB: @root, @utilities
    • Istanbul coverage ~1.94kB: @root, @syntax-highlighting, @istanbul-coverage
  • Wer nur benötigte Funktionen auswählen will, kann den custom builder verwenden
  • Für aufwendigere Anpassungen ist auch ein Fork mit anschließendem eigenem Patchen möglich
  • Jedes Unterverzeichnis unter github.com/lowlighter/matcha/styles wird von der Website direkt ausgeliefert
    • Wer zum Beispiel nur @syntax-highlighting nutzen möchte, kann die entsprechende mod.css direkt einbinden
    • Wenn man keine eigenen CSS-Variablen bereitstellt, wird wahrscheinlich das Paket @root benötigt
    • Alle mod.css-Dateien werden der Bequemlichkeit halber auch über Aliasse des übergeordneten Verzeichnisses angeboten

Welche HTML-Elemente gestaltet werden

  • Dokumentstruktur

    • Es werden section, article, header, footer, aside, nav, menu, hgroup, Überschriftselemente und weitere gestaltet
    • `` wurde so entworfen, dass es sich natürlich integriert, wenn der übergeordnete Container display: flex verwendet
    • innerhalb von wird wie eine Breadcrumb-Navigation angezeigt, `` wie eine Navigationsliste

  • Text- und Inline-Elemente

    • Es gibt Styles für , , , , , , , , , , , , , , , , , , `` und weitere
    • Da sich standardmäßige Browser-Tooltips nicht stylen lassen, wird für CSS-Tooltips das Attribut [data-title] statt [title] verwendet

  • Formularelemente

    • Gestylt werden , , , , , , , , ``
    • Für Eingabeelemente wird keine zusätzliche Validierung über die Browser-Validierung hinaus durchgeführt
    • :user-valid erhält einen --success-Rahmen, :user-invalid einen --danger-Rahmen
    • Beim Muster kann automatisch erkannt werden, ob ein Feld required ist, beim Muster jedoch nicht

  • Tabellen und Medien

    • Für `` wird border-collapse angewendet; wenn das Elternelement eine Breite hat, wird Overflow automatisch genutzt
    • Es kann in einen .table-responsive-Container eingebettet werden
    • Für , , `` werden abgerundete Ecken angewendet

  • und

    • Auch und gehören zu den standardmäßig gestylten Elementen
    • ::backdrop von `` wird angezeigt, wenn dialog.showModal() verwendet wird
    • Für das Schließen des Dialogs beim Absenden ohne JavaScript wird die Verwendung von `` empfohlen

Komfort und Preis der Layout-Funktionen

  • matcha.css bietet auch Optionen für Dokument-Layouts
  • Durch Hinzufügen der Klasse .layout-simple zu einem Element wird ein einfaches Layout aktiviert
  • Zur erforderlichen Struktur gehören .layout-simple, header:first-of-type, main:only-of-type, aside, nav, footer:last-of-type und weitere
  • Je nach Media-Bedingung ändert sich die Struktur
    • Auf Standardbildschirmen steht die Kombination aus header und main im Zentrum
    • Ab min-width: 960px wird eine Struktur aus aside und main verwendet
    • Ab min-width: 1280px kommt eine Struktur mit zwei aside-Elementen und main zum Einsatz
  • Auf kleinen Bildschirmen wird aside:nth-of-type(1) ausgeblendet; mit data-expand kann es wieder angezeigt werden oder mit data-expandable einklappbar gemacht werden
  • Die Nutzung des Layouts kann Refactoring des Dokuments erfordern, und wenn matcha.css später nicht mehr verwendet wird, kann erneut Refactoring nötig sein

Utility-Klassen sind eher Zusatzfunktionen

  • matcha.css stellt der Bequemlichkeit halber auch einige Utility-Klassen bereit
  • Zu den farbbezogenen Klassen gehören
    • .default, .muted, .accent, .active, .variant, .success, .attention, .severe, .danger
    • bd-* ändert die Rahmenfarbe, bg-* die Hintergrundfarbe und fg-* den Vordergrundstil
  • .flash erzeugt einen aufmerksamkeitsstarken Block und kann mit Farbklassen kombiniert werden
  • Es gibt Utilities für Text, Größe, Position, display, flex, overflow, cursor, selection, pointer-events, sizing, resize, shadow sowie SVG fill/stroke
  • Für Margin und Padding werden nummerische Klassen auf Basis der Werte 0, .125, .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 3, 4 verwendet
  • Da Utility-Klassen dem Dokument Klassen hinzufügen, können sie einen späteren Ausstieg aus matcha.css erschweren
  • Wenn die bereitgestellten Utilities nicht ausreichen oder zu eingeschränkt sind, sollte die Nutzung oder der Wechsel zu einem Utility-first-CSS-Framework erwogen werden
  • matcha.css hat nicht das Ziel, ein vollständiges CSS-Framework zu sein

Code-Darstellung, Editor-Look und Shadow DOM

  • matcha.css bietet Syntax-Highlighting-Klassen, die @media (prefers-color-scheme) folgen
  • Enthalten sind auch Klassen, um das Erscheinungsbild eines Code-Editors zu erzeugen
    • Die erforderliche Struktur ist .editor, > textarea, > div.highlight
    • Dieses Zusatz-Styling führt kein echtes Syntax-Highlighting durch, sondern gestaltet nur die Optik eines Code-Editors
    • Für echtes Highlighting wird eine Syntax-Highlighting-Bibliothek wie highlight.js benötigt
  • matcha.css definiert CSS-Variablen auch mit der Pseudoklasse :host und ist daher mit Shadow DOM kompatibel
  • Innerhalb von Shadow DOM kann matcha.css erneut importiert und mit eigenen Custom Styles kombiniert werden, ohne mit dem restlichen Dokument zu kollidieren

Browser-Unterstützung und Lizenz

  • matcha.css erklärt, für alle modernen Browser kompatibel zu sein
  • Die Support-Tabelle umfasst unter anderem Chrome 92 %, Edge 96 %, Safari 94 %, Firefox 95 %, Opera 95 %, Android Chrome 96 %, iOS Safari 93 % und Samsung Internet 96 %
  • Es ist als Open Source veröffentlicht und verwendet die MIT License
  • Das Repository befindet sich unter github.com/lowlighter/matcha

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-05-25
Hacker-News-Kommentare

  • Das Konzept, HTML als Single Source of Truth für das Dokumentenlayout wiederzubeleben, gefällt mir, und für Dokumente, die kein komplexes Design brauchen, könnte das produktiv sein.
    Allerdings finde ich die grundlegenden Designentscheidungen, besonders bei Farben und Finish, etwas enttäuschend. Ich bin kein professioneller Designer, habe aber oft genug Beschwerden von Nutzern über selbst entwickelte Software bekommen, um dieses gewisse unbeholfene Gefühl zu erkennen, wenn man es mit Arbeiten guter Designer vergleicht, die einen Hintergrund in Farbtheorie, Informationsdichte und Verläufen haben.
    Falls der Autor mitliest, würde mich interessieren, ob er erwogen hat, sich an der Ästhetik anderer FOSS-Projekte wie Bulma oder Tailwind zu orientieren oder mit einem professionellen Designer zusammenzuarbeiten. Soweit ich weiß, ist jgthms auch gelegentlich auf dieser Seite unterwegs.

    • Danke für das konstruktive Feedback, und ehrlich gesagt war ich etwas überrascht, dass es auf HN gelandet ist, bevor ich selbst überhaupt ein Show HN gepostet hatte.
      Ich bin weder Frontend-Entwickler noch Designer, daher könnte mein Mangel an Wissen über Farbtheorie, Barrierefreiheit und Dinge, die für andere selbstverständlich wirken, deutlich werden. Deshalb hat es wohl auch diesen handgemachten Charakter.
      Ich werde mir die angesprochenen Punkte in Zukunft genauer ansehen. Für Zusammenarbeit mit professionellen Designern bin ich offen, wenn es um Ratschläge geht, aber da es ein Side-Project ist, plane ich nicht, jemanden dafür zu bezahlen. Im Moment ist die Hauptzielgruppe ohnehin nicht Experten, sondern eher Hobbyanwender.
    • Ich habe auch das Gefühl, dass irgendetwas leicht seltsam wirkt, aber das hatte ich auch schon bei Dingen von Designern. Trotzdem sieht es ziemlich gut aus, so als hätte es jemand mit einem gewissen Gespür für Design oder ein Junior-Designer gemacht.
      Je länger ich es ansehe, desto besser gefällt mir der Gesamteindruck, aber gleichzeitig wird dieses leicht seltsame Gefühl auch stärker – ziemlich faszinierend.
      Edit: Wahrscheinlich wirkt die Farbe der Teetasse etwas seltsam. Das gesamte Logo gefällt mir, aber vielleicht wäre es besser, die Farbe der Tasse näher an die Hintergrundfarbe oben anzupassen.
    • Stimme zu. Ein Beispiel für etwas, das seltsam wirkt, ist der Hover-Stil der Buttons.
      Schwarzer Text auf dunklem Hintergrund funktioniert weder ästhetisch noch in Sachen Barrierefreiheit gut. Wenn die Voreinstellungen noch etwas stärker ausgearbeitet würden, wäre das das Sahnehäubchen.
    • Es gibt auf der Seite direkt einen Bereich, in dem man einen Custom Build erstellen kann, sodass man die Auswahl der Standardstile in gewissem Maß steuern kann.
      Aber ein Designer, der das Erscheinungsbild eines Unternehmens treffen will, könnte Stunden an Dingen wie Abständen verbringen, und dieses Tool scheint nicht für solche Leute gedacht zu sein.

  • Ich mag solche kleinen Bibliotheken. Ich nutze derzeit pico.css und werde mir das hier ebenfalls anschauen. Ich finde, die Standard-DOM-Elemente des Browsers sollten eigentlich so aussehen.
    Aber in der Realität tun sie das nicht, deshalb gibt es solche Bibliotheken. Beim Lesen eines anderen Kommentars habe ich nachgeschlagen, was „classless“ bei dieser Bibliothek bedeutet, und bin auf eine Liste ähnlicher Bibliotheken gestoßen.
    https://github.com/dbohdan/classless-css

    • Ich stimme zu, dass „die Standard-DOM-Elemente des Browsers eigentlich so aussehen sollten“, aber für Leute, die eigene Styles bauen wollen, könnte das ein Albtraum sein. Schon die heutigen Default-Styles sind in dieser Hinsicht manchmal etwas lästig.
      Ich dachte schon lange, es wäre gut, zwischen Chrome-Styles und Content-Styles umschalten zu können. Navigationsleisten oder eingebettete Visualisierungen und interaktive Elemente könnten dann im Chrome-Modus bleiben und nur minimales Default-Styling bekommen, während der eigentliche Fließtext den vom Nutzer bevorzugten Stil erhält.
    • Es gibt auch eine Website, auf der man solche Dinge direkt testen kann. Die, die ich kenne, ist https://www.cssbed.com/
    • Ich mag pico.css wirklich sehr. Es ist ein ziemlich guter Kompromiss: schnell und leicht zu lernen, aber trotzdem recht funktionsreich.
      Die Kombination Flask + HTMX + AlpineJS + PicoCSS ist aktuell mein „All Python and HTML SPA“.

  • Sieht interessant aus, aber Unterstreichungen bei Links zu entfernen und sich vor dem Hover nur auf Farbe zu verlassen, ist aus Sicht der Barrierefreiheit ziemlich problematisch.

    • Menschen mit Farbsehschwäche können eine CSS-Erweiterung hinzufügen, die Links unterstreicht oder hervorhebt.
      Sehbehinderte Menschen nutzen Screenreader oder Braille-Displays, also brauchen sie keine Unterstreichungen. Wer braucht sie dann noch?

  • Sieht vielversprechend aus. Ich habe bisher Simple.css verwendet: https://simplecss.org/
    Auf den ersten Blick scheint matcha.css etwas weiter entwickelt zu sein, daher will ich es einmal ausprobieren.

  • Vielleicht braucht es ein Tool, das solche classless CSS-Frameworks generiert. Dann könnte jeder Farbpalette, Padding, Schriftgrößen und Ähnliches fein abstimmen.

  • 30 Jahre lang hatten wir bei Standard-Controls proportionale Scrollleisten. Man konnte erkennen, wie viel des Dokuments das aktuelle Fenster anzeigt, und durch Klicken auf die Scrollleiste leicht an eine Position springen, die proportional zur Dokumentgröße ist.
    Man konnte auch die Pfeiltasten an der Scrollleiste benutzen oder per Tab dorthin wechseln und sie mit der Tastatur bedienen. Wer Seh- oder motorische Einschränkungen hatte, konnte über die Betriebssystemeinstellungen den Kontrast erhöhen oder sie größer machen.
    Und doch machen die Leute im Web des Jahres 2024 Scrollleisten routinemäßig kaputt und verwandeln sie in einen Albtraum der User Experience. Dass CSS die vom Betriebssystem bereitgestellten Standard-Controls, die ursprünglich gut funktionierten, komplett ruinieren kann und damit die Browser-UI/UX verkommt, ist beschämend.
    Bitte benutzt das nicht.

    • Dem widerspreche ich entschieden.
      Auch die vom Betriebssystem gelieferten Standard-Controls sind mit der Zeit schlechter geworden. Beispiele sind Apples verschwindende Scrollleisten und abgerundete Checkboxen.
      Die lassen sich nicht leicht ändern, aber mit CSS kann man solche Standard-Controls wenigstens verbessern.

  • Mir gefällt die Vorschaufunktion, mit der man sehen kann, wie es auf anderen Websites aussehen würde. Für eine CSS-Seite ist das wirklich intuitiv und passend.

  • Swyx’ Spark-Joy-Repository darf nicht fehlen:
    https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...

  • Warum werden immer noch neue CSS-Frameworks entwickelt? Warum ist das nicht längst ein gelöstes Problem?

    • Das ist kein CSS-Framework, sondern ein Stylesheet zum Mitnehmen für Leute, die sich nicht mit CSS oder Styling beschäftigen wollen, aber trotzdem eine vernünftig aussehende Website bauen möchten.
    • Vieles an CSS hat mit Kunst und Ästhetik zu tun. CSS-Arbeit wird nie wirklich „fertig“ sein.
      Solange Künstler sich im Medium Web ausdrücken wollen, werden neue Stylesheets und „Frameworks“ weiter entstehen.