Varför UnoCSS?
Motivation
Vi rekommenderar att du läser blogginlägget Reimagine Atomic CSS skrivet av skaparen av UnoCSS, Anthony Fu, för att få en bättre förståelse för motivationen bakom UnoCSS.
Hur skiljer sig UnoCSS från X?
Windi CSS
UnoCSS startades av en av Windi CSS😒 teammedlemmar, med mycket inspiration från det arbete vi gjorde i Windi CSS. Medan Windi CSS inte längre underhålls aktivt (från mars 2023), kan du betrakta UnoCSS som en "andlig efterträdare" till Windi CSS.
UnoCSS ärver Windi CSS:s on-demand-natur, attributify-läge, genvägar, variantgrupper, kompilering-läge och mycket mer. Ovanpå det är UnoCSS byggt från grunden med maximal utökbarhet och prestanda i åtanke, vilket gör oss kunna introducera nya funktioner som rena CSS-ikoner, värdelös attributify, tagify, webtypsnitt, etc.
Viktigast av allt, UnoCSS extraheras som en atomär CSS-motor, där alla funktioner är valfria, och gör det enkelt att skapa dina egna konventioner, ditt eget designsystem och dina egna presets - med kombinationerna av de funktioner du vill ha.
Tailwind CSS
Både Windi CSS och UnoCSS tog mycket inspiration från Tailwind CSS. Eftersom UnoCSS är byggt från grunden kan vi få en bra överblick över hur atomär CSS har designats med tidigare erfarenheter och abstraherats till en elegant och kraftfull API. Med ganska olika designmål är det inte riktigt en äpplen-till-äpplen-jämförelse med Tailwind CSS. Men vi kommer att försöka lista några skillnader.
Tailwind CSS är en PostCSS-plugin, medan UnoCSS är en isomorfisk motor med en samling förstaklassiga integrationer med byggverktyg (inklusive en PostCSS-plugin). Detta innebär att UnoCSS kan vara mycket mer flexibelt att användas på olika ställen (till exempel CDN Runtime, som genererar CSS i farten) och ha djupa integrationer med byggverktyg för att tillhandahålla bättre HMR, prestanda och utvecklarupplevelse (till exempel Inspektör).
Tekniska kompromisser åsido, UnoCSS är också designat för att vara fullt ut utökningsbart och anpassningsbart, medan Tailwind CSS är mer åsiktsstyrt. Att bygga ett anpassat designsystem (eller designtokens) ovanpå Tailwind CSS kan vara svårt, och du kan inte riktigt röra dig bort från Tailwind CSS:s konventioner. Med UnoCSS kan du bygga nästan vad du vill med full kontroll. Till exempel implementerade vi hela Tailwind CSS-kompatibla verktygen inom en enda preset, och det finns många fantastiska community-preset implementerade med andra intressanta filosofier.
Tack vare den flexibilitet som UnoCSS tillhandahåller kan vi experimentera med många innovativa funktioner ovanpå det, till exempel:
På grund av de olika designmålen för Tailwind CSS stöder UnoCSS inte Tailwind CSS:s pluginsystem eller konfigurationer, vilket innebär att det kan vara svårare att migrera från ett tungt anpassat Tailwind CSS-projekt. Detta är det avsedda beslutet för att göra UnoCSS högpresterande och utökningsbart, och vi tror att kompromissen är värd det.