Pourquoi UnoCSS ?

Motivations

Nous vous recommandons de lire l'article de blog Reimagine Atomic CSS écrit par le créateur d'UnoCSS, Anthony Fu, pour mieux comprendre la motivation derrière UnoCSS.

En quoi UnoCSS est-il différent de X ?

Windi CSS

UnoCSS a été créé par l'un des membres de l'équipe Windi CSS, avec beaucoup d'inspiration tirée du travail que nous avons fait dans Windi CSS. Bien que Windi CSS ne soit plus activement maintenu (depuis mars 2023), vous pouvez considérer UnoCSS comme un "successeur spirituel" de Windi CSS.

UnoCSS hérite de la nature à la demande de Windi CSS, du mode attributify, des raccourcis, des groupes de variantes, du mode de compilation et bien plus encore. En plus de cela, UnoCSS est construit de zéro avec une extensibilité et des performances maximales à l'esprit, nous permettant d'introduire de nouvelles fonctionnalités comme les icônes CSS pures, l'attributify sans valeur, tagify, les polices web, etc.

Plus important encore, UnoCSS est extrait comme un moteur CSS atomique, où toutes les fonctionnalités sont optionnelles, et rend facile la création de vos propres conventions, votre propre système de design et vos propres presets - avec les combinaisons de fonctionnalités que vous voulez.

Tailwind CSS

Windi CSS et UnoCSS ont tous deux pris beaucoup d'inspiration de Tailwind CSS. Comme UnoCSS est construit de zéro, nous sommes capables d'avoir une excellente vue d'ensemble de la façon dont le CSS atomique a été conçu avec les arts antérieurs et abstrait dans une API élégante et puissante. Avec des objectifs de conception assez différents, ce n'est pas vraiment une comparaison directe avec Tailwind CSS. Mais nous essaierons de lister quelques différences.

Tailwind CSS est un plugin PostCSS, tandis qu'UnoCSS est un moteur isomorphe avec une collection d'intégrations de première classe avec les outils de build (y compris un plugin PostCSS). Cela signifie qu'UnoCSS peut être beaucoup plus flexible pour être utilisé dans différents endroits (par exemple, Runtime CDN, qui génère du CSS à la volée) et avoir des intégrations profondes avec les outils de build pour fournir un meilleur HMR, des performances et une expérience développeur (par exemple, l'Inspecteur).

Mis à part les compromis techniques, UnoCSS est également conçu pour être entièrement extensible et personnalisable, tandis que Tailwind CSS est plus opinioné. Construire un système de design personnalisé (ou des tokens de design) au-dessus de Tailwind CSS peut être difficile, et vous ne pouvez pas vraiment vous éloigner des conventions de Tailwind CSS. Avec UnoCSS, vous pouvez construire à peu près tout ce que vous voulez avec un contrôle total. Par exemple, nous avons implémenté toutes les utilités compatibles avec Tailwind CSS dans un seul preset, et il y a beaucoup de presets communautaires géniaux implémentés avec d'autres philosophies intéressantes.

Grâce à la flexibilité qu'UnoCSS fournit, nous sommes capables d'expérimenter beaucoup de fonctionnalités innovantes au-dessus, par exemple :

• Icônes CSS pures
• Mode Attributify
• Groupes de variantes
• Raccourcis
• Tagify
• Polices web
• Runtime CDN
• Inspecteur

En raison des objectifs de conception différents par rapport à Tailwind CSS, UnoCSS ne supporte pas le système de plugins ou les configurations de Tailwind CSS, ce qui signifie qu'il pourrait être plus difficile de migrer depuis un projet Tailwind CSS fortement personnalisé. C'est la décision intentionnelle pour rendre UnoCSS performant et extensible, et nous croyons que le compromis en vaut la peine.