Warum UnoCSS?
Motivationen
Wir empfehlen Ihnen, den Blogbeitrag Reimagine Atomic CSS zu lesen, der vom Schöpfer von UnoCSS, Anthony Fu, geschrieben wurde, um ein besseres Verständnis der Motivation hinter UnoCSS zu erhalten.
Wie unterscheidet sich UnoCSS von X?
Windi CSS
UnoCSS wurde von einem der Teammitglieder von Windi CSS gestartet, mit viel Inspiration aus der Arbeit, die wir in Windi CSS geleistet haben. Während Windi CSS nicht mehr aktiv gepflegt wird (Stand März 2023), können Sie UnoCSS als einen "geistigen Nachfolger" von Windi CSS betrachten.
UnoCSS erbt die On-Demand-Natur von Windi CSS, den Attributify-Modus, Shortcuts, Variant Groups, Kompilierungsmodus und vieles mehr. Darüber hinaus wurde UnoCSS von Grund auf mit maximaler Erweiterbarkeit und Leistung entwickelt, was es uns ermöglicht, neue Funktionen wie Pure CSS Icons, Wertloses Attributify, Tagify, Web Fonts usw. einzuführen.
Am wichtigsten ist, dass UnoCSS als eine Atomic CSS Engine extrahiert wurde, bei der alle Funktionen optional sind und es einfach macht, Ihre eigenen Konventionen, Ihr eigenes Design-System und Ihre eigenen Presets zu erstellen - mit den Kombinationen der Funktionen, die Sie möchten.
Tailwind CSS
Sowohl Windi CSS als auch UnoCSS haben viel Inspiration von Tailwind CSS genommen. Da UnoCSS von Grund auf gebaut wurde, haben wir einen guten Überblick darüber, wie Atomic CSS mit früheren Arbeiten gestaltet und in eine elegante und leistungsstarke API abstrahiert wurde. Mit ziemlich unterschiedlichen Designzielen ist es kein wirklich fairer Vergleich mit Tailwind CSS. Aber wir werden versuchen, einige Unterschiede aufzulisten.
Tailwind CSS ist ein PostCSS-Plugin, während UnoCSS eine isomorphe Engine mit einer Sammlung von erstklassigen Integrationen mit Build-Tools (einschließlich eines PostCSS-Plugins) ist. Das bedeutet, dass UnoCSS viel flexibler an verschiedenen Stellen verwendet werden kann (z. B. CDN Runtime, das CSS dynamisch generiert) und tiefe Integrationen mit Build-Tools hat, um besseres HMR, Leistung und Entwicklererfahrung zu bieten (z. B. der Inspector).
Abgesehen von technischen Kompromissen ist UnoCSS auch darauf ausgelegt, vollständig erweiterbar und anpassbar zu sein, während Tailwind CSS voreingenommener ist. Der Aufbau eines benutzerdefinierten Design-Systems (oder Design-Tokens) auf Tailwind CSS kann schwierig sein, und Sie können sich nicht wirklich von den Konventionen von Tailwind CSS entfernen. Mit UnoCSS können Sie fast alles erstellen, was Sie möchten, mit vollständiger Kontrolle. Zum Beispiel haben wir alle Tailwind CSS-kompatiblen Utilities innerhalb eines einzelnen Presets implementiert, und es gibt viele tolle Community-Presets, die mit anderen interessanten Philosophien implementiert wurden.
Dank der Flexibilität, die UnoCSS bietet, können wir viele innovative Funktionen darauf experimentieren, zum Beispiel:
Aufgrund der unterschiedlichen Designziele gegenüber Tailwind CSS unterstützt UnoCSS das Plugin-System oder die Konfigurationen von Tailwind CSS nicht, was bedeutet, dass die Migration von einem stark angepassten Tailwind CSS-Projekt schwieriger sein könnte. Dies ist die beabsichtigte Entscheidung, um UnoCSS hochperformant und erweiterbar zu machen, und wir glauben, dass der Kompromiss es wert ist.