Guida · Le fondamenta
Due modi di scrivere uno stile
Classi di utilità nel viewMode, oppure CSS nello store. Non è una questione di gusto: rispondono a due domande diverse.
Dove siamo
Sai scrivere uno stile e sai che diventa us-<nome>. Alla fine di questo capitolo saprai quando NON scriverlo.
Le due strade
Le classi nel className di un viewMode descrivono questo aspetto qui. Sono immediate, si leggono sul posto, e cambiarle cambia solo quel viewMode.
Uno stile nello store dà un nome a una combinazione e la rende citabile da ovunque. Costa un passaggio in più — devi sapere che esiste — e compra un punto solo da cui cambiarla.
// db.viewmodes.json — la stessa voce, scritta nei due modi
{ "name": "CardCompact", "className": "p-4", "styles": ["rounded2xl", "elevationLg"] }
{ "name": "CardCompact", "className": "p-4", "styles": ["panel", "elevationLg"] }Come si sceglie
La domanda non è quale sia più corta ma quante cose devono cambiare insieme. Una sola: classi. Tre o più, e devono restare uguali: stile.
C’è poi quello che le utilità non esprimono — ombre composite, filtri, pseudo-elementi, animazioni, color-mix. Lì non è una scelta: è css.
E fra `classes` e `css`, non è un gusto
Uno stile scritto in classes si espande nelle utility prima di arrivare al DOM. Uno scritto in css emette una regola vera, .us-<nome> { … }.
La differenza che conta la fa tailwind-merge: sa risolvere un conflitto fra due utility — text-sm batte text-xs, l’ultima vince — ma contro una regola è cieco. Due stili css che toccano la stessa proprietà si risolvono per ordine nel foglio, cioè per caso.
Quindi: classes ovunque le utility bastino, perché lì il conflitto è governato. css solo dove non arrivano — e lì ogni stile deve occupare UN asse, perché nessuno lo protegge dal collidere.
C’è un caso in cui l’ordine si sfrutta di proposito: l’inchiostro è scritto in css e collocato DOPO le superfici, così un accento deliberato — inkPrimary su un link — vince sull’inchiostro che il fondo dichiara. Fra due regole decide l’ordine, e qui l’ordine è la decisione.
Quando non funziona
Scrivi uno stile per una cosa usata in un punto solo. Non si rompe niente, e hai comprato un’indirezione che non ti serve: chi legge il viewMode adesso deve andare a cercare cosa fa us-qualcosa.
L’errore opposto è più costoso ma si vede prima: la stessa combinazione copiata in sei viewMode, e il giorno che cambia ne aggiorni cinque.
Avanti
Il vocabolario degli aspetti è completo. Si passa alla forma.