Atomic CSS

Definition

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

Analogie

Un alphabet : chaque lettre est simple, mais tu peux ecrire 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

Reduire drastiquement la taille du CSS final car les declarations sont partagees entre composants.

Termes lies