CSS Houdini könnte die Art und Weise, wie wir CSS schreiben und verwalten, verändern

CSS Houdini ist vielleicht die aufregendste Entwicklung in CSS. Houdini besteht aus einer Reihe von separaten APIs, die jeweils separat in Browsern ausgeliefert werden, und einige davon wurden bereits ausgeliefert (hier ist die Browserunterstützung). Die Paint API ist eine davon. Ich bin sehr gespannt darauf und habe kürzlich angefangen darüber nachzudenken, wie ich sie in meiner Arbeit einsetzen kann.

Eine Möglichkeit, dies zu tun, ist die Vermeidung der Neuerfindung des Rads. Dies werden wir in diesem Beitrag besprechen, indem wir es mit Methoden vergleichen, die wir derzeit in JavaScript und CSS verwenden. (Ich werde nicht auf die Frage eingehen, wie man CSS Houdini schreibt, da es großartige Artikel wie diesen, diesen und diesen gibt.)

Houdini bringt Modularität und Konfigurationen in CSS

Die Funktionsweise von CSS Houdini bringt zwei Vorteile: **Modularität** und **Konfigurierbarkeit**. Beides sind gängige Methoden, um unser Leben als Entwickler zu erleichtern. Wir sehen diese Konzepte oft in der JavaScript-Welt, aber weniger in der CSS-Welt... bis jetzt.

Hier ist eine Tabelle, die die Arbeitsabläufe für einige Anwendungsfälle vergleicht, wobei traditionelles CSS mit der Verwendung von Houdini verglichen wird. Ich habe auch JavaScript für weitere Vergleiche hinzugefügt. Sie können sehen, dass CSS Houdini es uns ermöglicht, CSS produktiver zu nutzen, ähnlich wie sich die JavaScript-Welt zu Komponenten entwickelt hat.

	Traditionelles CSS	CSS Houdini	JavaScript
Wenn wir häufig verwendete Snippets benötigen	Schreibe es von Grund auf neu oder kopiere es von irgendwoher.	Importiere ein Worklet dafür.	Importiere eine JS-Bibliothek.
Passe das Snippet für den Anwendungsfall an	Manuell den Wert in CSS ändern.	Bearbeite benutzerdefinierte Eigenschaften, die das Worklet verfügbar macht.	Bearbeite Konfigurationen, die die Bibliothek bereitstellt.
Code teilen	Teile den Code für die Rohstile mit Kommentaren, wie jeder Teil geändert werden kann.	Teile das Worklet (in Zukunft, mit einem Paketverwaltungsdienst) und dokumentiere benutzerdefinierte Eigenschaften.	Teile die Bibliothek mit einem Paketverwaltungsdienst (wie npm) und dokumentiere, wie sie verwendet und konfiguriert wird.

Modularität

Mit Houdini kannst du ein Worklet importieren und es mit einer einzigen Codezeile verwenden.

<script>
  CSS.paintWorklet.addModule('my-useful-paint-worklet.js');
</script>

Das bedeutet, dass es nicht notwendig ist, häufig verwendete Stile jedes Mal neu zu implementieren. Du kannst eine Sammlung deiner eigenen Worklets haben, die in jedem deiner Projekte verwendet oder sogar untereinander geteilt werden können.

Wenn du nach Modularität für HTML und JavaScript zusätzlich zu Stilen suchst, dann sind Web Components die Lösung.

Das ist sehr ähnlich zu dem, was wir bereits in der JavaScript-Welt haben. Die meisten Leute werden keine häufig verwendeten Funktionen neu implementieren, wie z.B. Throttling oder Deep-Copying von Objekten. Wir importieren einfach Bibliotheken wie Lodash.

Ich kann mir vorstellen, dass wir CSS Houdini Paketverwaltungsdienste haben könnten, wenn die Popularität von CSS Houdini zunimmt, und jeder Worklets für interessante Wasserfall-Layouts, Hintergrundmuster, komplexe Animationen usw. importieren könnte.

Konfigurierbarkeit

Houdini funktioniert gut mit CSS-Variablen, die sich weitgehend selbst befähigen. Mit CSS-Variablen kann ein Houdini-Worklet vom Benutzer konfiguriert werden.

.my-element {
  background-image: paint(triangle);
  --direction: top;
  --size: 20px;
}

Im Snippet sind --direction und --size CSS-Variablen, und sie werden im triangle Worklet verwendet (definiert vom Autor des triangle Worklets). Der Benutzer kann die Eigenschaft ändern, um zu aktualisieren, wie es angezeigt wird, sogar dynamisch durch das Aktualisieren von CSS-Variablen in JavaScript.

Wenn wir es wieder mit dem vergleichen, was wir bereits in JavaScript haben, haben JavaScript-Bibliotheken normalerweise Optionen, die übergeben werden können. Zum Beispiel können wir Werte für Geschwindigkeit, Richtung, Größe usw. an eine Carousel-Bibliothek übergeben, damit sie so funktioniert, wie wir es wünschen. Das Anbieten dieser APIs auf Elementebene in CSS ist sehr nützlich.

Ein Houdini-Workflow macht meinen Entwicklungsprozess viel effizienter

Sehen wir uns ein vollständiges Beispiel dafür an, wie all dies zusammenwirken kann, um die Entwicklung zu erleichtern. Wir verwenden ein **Tooltip**-Designmuster als Beispiel. Ich stelle fest, dass ich dieses Muster oft auf verschiedenen Websites verwende, und implementiere es doch jedes Mal für jedes neue Projekt neu.

Lassen Sie uns kurz meine frühere Erfahrung durchgehen

1. Okay, ich brauche ein Tooltip.
2. Es ist eine Box mit einem Dreieck an einer Seite. Ich werde ein Pseudo-Element verwenden, um das Dreieck zu zeichnen.
3. Ich kann den Trick mit dem transparenten Rand verwenden, um das Dreieck zu zeichnen.
4. Zu diesem Zeitpunkt wühle ich höchstwahrscheinlich in meinen vergangenen Projekten, um den Code zu kopieren. Lassen Sie mich nachdenken... dieses muss nach oben zeigen, welche Seite ist transparent?
5. Oh, das Design erfordert einen Rand für das Tooltip. Ich muss ein weiteres Pseudo-Element verwenden und einen Rand für das zeigende Dreieck vortäuschen.
6. Was? Sie haben beschlossen, die Richtung des Dreiecks zu ändern?! OK, OK. Ich werde alle Werte beider Dreiecke anpassen...

Das ist keine Raketenwissenschaft. Der gesamte Prozess kann nur fünf Minuten dauern. Aber sehen wir, wie es mit Houdini besser sein kann.

Ich habe ein einfaches Worklet erstellt, um ein Tooltip zu zeichnen, mit vielen Optionen, um sein Aussehen zu ändern. Sie können es auf GitHub herunterladen.

Hier ist mein neuer Prozess, dank Houdini

1. Okay, ich brauche ein Tooltip.
2. Ich werde dieses Tooltip-Worklet importieren und verwenden.
3. Jetzt werde ich es mit benutzerdefinierten Eigenschaften modifizieren.

<script>CSS.paintWorklet.addModule('my-tooltip-worklet.js')</script>
<style>
.tooltip-1 {
  background-image: paint(tooltip);
  padding: calc(var(--triangle-size) * 1px + .5em) 1em 1em;
  --round-radius: 0;
  --background-color: #4d7990;
  --triangle-size: 20;
  --position: 20;
  --direction: top;
  --border-color: #333;
  --border-width: 2;
  color: #fff;
}
</style>

Hier ist eine Demo! Spielen Sie mit den Variablen herum!

CSS Houdini öffnet eine Tür für die gemeinsame Nutzung von modularisierten, konfigurierbaren Stilen. Ich freue mich darauf, dass Entwickler CSS Houdini Worklets verwenden und teilen werden. Ich versuche, weitere nützliche Beispiele für die Verwendung von Houdini hinzuzufügen. Ping mich, wenn Sie Ideen haben oder zu diesem Repository beitragen möchten.