Atomic CSS

Definition

Approche où chaque classe CSS fait exactement une chose (une propriété, une valeur). Le CSS total est borné car les classes sont réutilisées partout. Tailwind et UnoCSS l'implémentent.

Analogie

Comme un alphabet : un nombre fini de lettres pour écrire une infinité de mots.

Exemple de code

/* Atomic classes */
.d-flex { display: flex; }
.ai-center { align-items: center; }
.p-4 { padding: 1rem; }
.bg-blue { background: blue; }

<div class="d-flex ai-center p-4 bg-blue">

Cas d'usage

Grands projets où la taille du CSS doit rester constante même si le nombre de composants augmente.

Termes lies