Atomic CSS

Définition

Approche ou chaque classe CSS ne fait qu'une seule chose. Les outils comme Tailwind, Griffel ou Stylex génèrent des classes atomiques pour minimiser la taille du CSS.

Analogie

Un alphabet : chaque lettre est simple, mais tu peux écrire tous les mots en les combinant.

Exemple de code

/* Atomic CSS genere */
.a { display: flex; }
.b { padding: 8px; }
.c { color: blue; }

/* Usage */
<div class="a b c">...</div>
/* Au lieu de: .card { display:flex; padding:8px; color:blue; } */

Cas d'usage

Réduire drastiquement la taille du CSS final car les déclarations sont partagées entre composants.

Termes liés