L’optimisation des performances d’un site web est cruciale pour offrir une expérience utilisateur fluide et rapide. L’utilisation d’une bibliothèque CSS atomique est l’une des méthodes les plus efficaces pour y parvenir. Dans cet article, nous allons découvrir UnoCSS, un moteur CSS atomique instantané à la demande. Nous explorerons les concepts liés à cet outil et comment l’intégrer dans vos projets.

I. C’est quoi UnoCSS?

UnoCSS est un moteur CSS atomique instantané, conçu pour être flexible et extensible. Le noyau est non-opinionné, et toutes les classes utilitaires sont fournies via des préréglages qu'on appelle Presets en d'autres termes.

UnoCSS s'inspire de bibliothèques populaires telles que Windi CSS, Tailwind CSS et Twind.

II. Concepts

Atomic CSS

Le CSS atomique est une approche de l’architecture CSS qui favorise les classes à usage unique et de petite taille, avec des noms basés sur la fonction visuelle. Cette approche permet de garder le CSS compact en créant des styles hautement granulaires et réutilisables, au lieu d’un ensemble de règles plus volumineux.

Prenons un exemple simple :

Pour styler un composant Card normalement, on aurait :

.card{
    padding: 2rem;
    border-radius: 0.5rem;
    background: #fff;
    /** other properties **/
}

Ce code est normal et fonctionne sans soucis. Mais qu’en est-il des autres composants utilisant deux ou plus de trois règles similaires à celles appliquées sur notre Card ? Vous pourriez dire que nous pouvons créer des variables que nous réutiliserons. C’est vrai et c'est pas mal, mais avec le CSS atomique, nous allons écrire nos règles CSS dans différentes classes de petite taille. Pour l’exemple ci-dessus, nous aurions plutôt quelque chose comme <div class="p-4 rounded-md bg-white">Contenu</div> et notre CSS va ressembler à ceci :

COPY

.p-4{
    padding: 2rem;
}

.rounded-md{
    border-radius: 0.5rem;
}

.bg-white{
    background: #ffff;
}

Vous pourriez penser que cela fait beaucoup de choses et devient encombrant ! Mais non, cela vous facilite plutôt la tâche. Au lieu d’écrire, réécrire et réécrire vos règles, vous n'aurez plutôt qu'à les réutiliser dans le HTML sans toucher au CSS et appliquer directement les styles sur voss composants via des classes utilitaires (utility classes).

Ce concept a du sens et devient très intéressant lorsque vous utilisez un outil comme UnoCSS: Windi ou TailwindCSS qui génère les classes utilitaires à votre place, vous n'aurez donc qu'à réutiliser ces classes pour appliquer le style à vos éléments HTML sans vous soucier de la partie CSS sauf en cas nécéssité.

Instant On Demand CSS

L’un des aspects les plus remarquables d’UnoCSS est sa rapidité instantanée. Contrairement à d’autres moteurs CSS atomiques, UnoCSS ne nécessite pas d’analyse syntaxique, d’arbre syntaxique abstrait (AST) ou de recherche. Cela lui permet d’être environ 5 fois plus rapide que des bibliothèques telles que Windi CSS ou Tailwind JIT.

UnoCSS est personnalisable (Fully Customizable)

UnoCSS se distingue des autres outils CSS atomiques par sa personnalisation complète et ses fonctionnalités puissantes. Contrairement à certains outils, UnoCSS ne se contente pas d'utiliser des classes utilitaires de base prédéfinis. Au lieu de cela, toutes les fonctionnalités sont fournies via des presets entièrement personnalisables, offrant une flexibilité et un contrôle inégalés.

Mode Attributify

Le mode Attributify d’UnoCSS offre une fonctionnalité unique qui permet de regrouper les classes utilitaires dans des attributs HTML. Cette approche facilite la lecture et la gestion du code CSS, en particulier pour les projets de grande envergure. Avec Attributify, vous avez la flexibilité d’attribuer des utilitaires en utilisant des classes ou des attributs, selon vos préférences. Cette fonctionnalité vous permet de créer des interfaces utilisateur élégantes et organisées avec une facilité incroyable.

II. Installation

L'installation d'UnoCSS est simple et peut être effectuée de différentes manières en fonction de votre configuration de projet.

UnoCSS vient avec des intégrations pour divers Frameworks/outils :

Integration avec Vite

Pour intégrer UnoCSS avec Vite, vous pouvez utiliser le plugin vite-plugin-uno. En ajoutant ce plugin à votre configuration Vite, vous pourrez utiliser UnoCSS comme préprocesseur CSS atomique dans votre projet Vite. Cette intégration vous permettra de tirer pleinement parti des fonctionnalités puissantes d’UnoCSS pour créer des interfaces utilisateur réactives et performantes.

npm install -D unocss

En savoir plus ici : https://unocss.dev/integrations/vite

Integration avec Nuxt

Si vous utilisez Nuxt.js, vous pouvez installer le module @unocss/nuxt pour intégrer UnoCSS dans votre application Nuxt. Cela vous permettra de profiter des fonctionnalités d'UnoCSS dans vos composants Nuxt.

npm install -D @unocss/nuxt

En savoir plus ici : https://unocss.dev/integrations/nuxt

Integration avec le CDN Runtime

UnoCSS peut également être utilisé directement via un CDN. Vous pouvez simplement importer UnoCSS en utilisant une seule ligne de code dans votre fichier HTML, ce qui facilite son utilisation dans des projets simples ou des prototypes.

<link rel="stylesheet" href="<https://unpkg.com/@unocss/runtime>">

Conclusion

UnoCSS est un moteur CSS atomique instantané offrant une approche flexible et puissante pour la création de sites web. Avec ses fonctionnalités personnalisables, sa rapidité de traitement et sa légèreté, UnoCSS est un choix idéal pour optimiser vos sites web.

N’oubliez pas de consulter la documentation officielle d’UnoCSS pour obtenir des informations détaillées. Découvrez les fonctionnalités d’UnoCSS, installez-le dans votre projet et profitez de tous ses avantages.

A la decouverte de UNOCSS : un moteur CSS atomique instantané à la demande

Table of contents