Waarom UnoCSS?
Motivaties
We raden je aan om het blog artikel Reimagine Atomic CSS te lezen, geschreven door de maker van UnoCSS, Anthony Fu, om een beter begrip te krijgen van de motivatie achter UnoCSS.
Hoe verschilt UnoCSS van X?
Windi CSS
UnoCSS is gestart door één van de Windi CSS teamleden, met veel inspiratie van het werk dat we deden in Windi CSS. Terwijl Windi CSS niet meer actief wordt onderhouden (vanaf maart 2023), kun je UnoCSS beschouwen als een "spirituele opvolger" van Windi CSS.
UnoCSS erft Windi CSS's on-demand nature, attributify mode, shortcuts, variant groups, compilation mode en nog veel meer. Bovendien is UnoCSS vanaf de grond opgebouwd met maximale uitbreidbaarheid en prestaties in het achterhoofd, waardoor we in staat zijn om nieuwe functies te introduceren zoals pure CSS icons, valueless attributify, tagify, web fonts, etc.
Het belangrijkste is dat UnoCSS is geëxtraheerd als een atomaire CSS engine, waar alle functies optioneel zijn, en het gemakkelijk maakt om je eigen conventies, eigen design system, en eigen presets te maken - met de combinaties van de functies die je wilt.
Tailwind CSS
Zowel Windi CSS als UnoCSS hebben veel inspiratie gehaald van Tailwind CSS. Omdat UnoCSS vanaf de grond is opgebouwd, zijn we in staat om een goed overzicht te hebben van hoe atomaire CSS is ontworpen met prior art en geabstraheerd tot een elegante en krachtige API. Met vrij verschillende ontwerpdoelen is het niet echt een appels-met-appels vergelijking met Tailwind CSS. Maar we zullen proberen om enkele verschillen te vermelden.
Tailwind CSS is een PostCSS plugin, terwijl UnoCSS een isomorfe engine is met een collectie van eersteklas integraties met build tools (inclusief een PostCSS plugin). Dit betekent dat UnoCSS veel flexibeler kan worden gebruikt op verschillende plaatsen (bijvoorbeeld CDN Runtime, die CSS on-the-fly genereert) en diepe integraties heeft met build tools om betere HMR, prestaties en developer experience te bieden (bijvoorbeeld de Inspector).
Afgezien van technische afwegingen, is UnoCSS ook ontworpen om volledig uitbreidbaar en aanpasbaar te zijn, terwijl Tailwind CSS meer opinionated is. Het bouwen van een custom design system (of design tokens) bovenop Tailwind CSS kan moeilijk zijn, en je kunt niet echt weg komen van de conventies van Tailwind CSS. Met UnoCSS kun je vrijwel alles bouwen wat je wilt met volledige controle. Bijvoorbeeld, we hebben de hele Tailwind CSS compatibele utilities geïmplementeerd binnen een enkele preset, en er zijn veel geweldige community presets geïmplementeerd met andere interessante filosofieën.
Dankzij de flexibiliteit die UnoCSS biedt, zijn we in staat om veel innovatieve functies erop te experimenteren, bijvoorbeeld:
Vanwege de verschillende ontwerpdoelen ten opzichte van Tailwind CSS ondersteunt UnoCSS niet het plugin systeem of configuraties van Tailwind CSS, wat betekent dat het moeilijker zou kunnen zijn om te migreren van een zwaar aangepast Tailwind CSS project. Dit is de bedoelde beslissing om UnoCSS high-performant en uitbreidbaar te maken, en we geloven dat de afweging het waard is.