Sondaggi “fast money” sul CSS: cosa amiamo davvero (e cosa dobbiamo ancora cercare su Google)

Nel CSS ci sono scelte che sembrano puramente “di gusto” (un colore preferito), e scelte che invece raccontano abitudini tecniche consolidate (unità, proprietà e sintassi che inciampano). Un piccolo giro di domande in stile sondaggio mette insieme entrambi i mondi e restituisce un dato interessante: anche quando parliamo di preferenze, in realtà stiamo parlando di produttività, compatibilità e di quanto sia facile ricordarsi le cose.

Di seguito una lettura ragionata dei risultati più curiosi e delle implicazioni pratiche per chi scrive frontend.

---

Colori “con nome”: perché RebeccaPurple domina (e DeepPink piace davvero)

Tra i colori nominali di CSS, RebeccaPurple risulta nettamente in testa, mentre DeepPink compare tra le scelte ricorrenti.

Non è difficile capirne il perché:

• RebeccaPurple è ormai un piccolo “meme” tecnico-culturale del web, oltre a essere un colore effettivamente riconoscibile e usabile.
• DeepPink è un nome immediato e un colore energico: è facile ricordarlo e “funziona” quando serve un accento forte.

Implicazione pratica

I colori con nome sono comodi per prototipi e demo, ma nel lavoro quotidiano conviene trattarli come eccezioni. Per design system e UI reali è più robusto passare da:

• token (CSS custom properties),
• palette definite (anche per tema scuro/chiaro),
• e un modello colore moderno che aiuti a controllare meglio contrasto e percezione.

---

Formati colore: OKLCH in cima, e non è più una nicchia

La sorpresa migliore è che OKLCH risulta il formato colore preferito.

OKLCH piace perché consente un controllo più prevedibile su:

• luminosità (L),
• croma/saturazione (C),
• tonalità (H),

con una progressione spesso più “naturale” rispetto a HSL quando si creano scale e varianti.

Implicazione pratica

Se stai costruendo una palette o un set di token (primary/hover/active, scale di grigi, ecc.), OKLCH è particolarmente efficace per:

• generare varianti coerenti (stessa hue, L che sale/scende),
• ridurre sorprese nelle transizioni,
• ragionare meglio su temi e modalità scure.

Nota: vale sempre la pena verificare il supporto nei browser target e prevedere fallback quando necessario.

---

Proprietà CSS preferita: vince “display”, ma è una scelta rivelatrice

La proprietà più votata è display (con margine), seguita da flex.

A prima vista “display” come preferita fa sorridere: è una di quelle risposte istintive. Ma in realtà ha senso, perché display è un moltiplicatore di capacità:

• attiva i modelli di layout (block/inline, flex, grid),
• cambia il comportamento di elementi e flow,
• sblocca soluzioni con poco codice.

Al contrario, una proprietà come overflow può essere amata da chi lavora spesso con:

• contenuti che devono scrollare,
• clipping,
• gestione di aree con dimensioni dinamiche.

Curiosamente, però, overflow non raccoglie voti: probabilmente perché è una proprietà che usiamo spesso, ma che associamo anche a “quirk” e implicazioni collaterali (scrollbar, contenuti tagliati, stacking context in certe combinazioni, ecc.).

Implicazione pratica

Se vuoi aumentare davvero la “potenza” del tuo CSS:

• investi sul dominio di display + i modelli di layout,
• e tratta overflow come uno strumento preciso, da usare con intenzione (e test).

---

Unità: rem primo, ch subito dietro (e ha un suo perché)

Tra le unità, rem è la regina assoluta. È la scelta più “sicura” perché:

• scala con le preferenze utente (accessibilità),
• rende più coerenti spaziature e tipografia rispetto a px,
• si integra bene con un sistema di token.

Subito dopo compare ch, l’unità basata sulla larghezza del carattere “0” del font corrente. È una scelta molto interessante e, quando usata bene, estremamente pratica.

Dove ch brilla davvero

• Larghezza delle righe di testo (misura tipografica): limitare la line length in modo sensato.
• Input e UI legate al numero di caratteri (codici, OTP, campi fixed-length).

Implicazione pratica

• Usa rem come base per dimensioni “di sistema” (font-size, spacing, componenti).
• Usa ch quando la dimensione è concettualmente legata ai caratteri (testo e campi).

---

La sintassi che continuiamo a cercare: grid e gradienti (più di quanto ammettiamo)

Alla domanda “quale proprietà devi sempre andare a rivedere per la sintassi?”, in cima c’è grid. Subito dietro compaiono gradienti, e poi un mix di flex + allineamenti (justify/align) e persino box-shadow.

Perché proprio grid

Grid è potente, ma ha una superficie ampia:

• funzioni come minmax(), repeat(),
• naming di linee/aree,
• gestione implicita/esplicita delle tracce,
• proprietà correlate (auto-flow, auto-fit/fill, ecc.).

Non è “difficile”: è che ha molte combinazioni, e ricordarle tutte a memoria è un costo inutile.

Perché i gradienti

I gradienti sembrano semplici finché non devi:

• gestire angoli e stop con precisione,
• combinare più layer,
• ottenere un risultato identico tra browser e design tool.

Implicazione pratica

Qui la lezione è chiara: non serve memorizzare tutto. Serve:

• tenere a portata snippet affidabili (grid patterns e gradient recipes),
• costruirsi una libreria personale di soluzioni ripetibili,
• usare strumenti di verifica rapida (devtools, editor con autocomplete, esempi di riferimento).

---

Sintesi finale: preferenze che raccontano il nostro CSS quotidiano

Questi risultati disegnano un profilo abbastanza realistico di come lavoriamo:

• ci affezioniamo a dettagli “culturali” come RebeccaPurple, ma ci muoviamo verso strumenti più moderni come OKLCH;
• consideriamo display una proprietà cardine perché abilita interi modelli mentali di layout;
• scegliamo rem per solidità e accessibilità, ma apprezziamo unità specialistiche come ch quando servono;
• continuiamo a ricontrollare grid e gradienti non per mancanza di competenza, ma perché sono domini ricchi di combinazioni.

La conclusione pratica è semplice: investire su palette moderne (OKLCH), su fondamentali di layout (display/flex/grid) e su un set di snippet personali per ciò che è naturalmente “da consultare” è uno dei modi più rapidi per rendere il CSS più veloce, coerente e meno faticoso da mantenere.