Colori, formati colore, proprietà e unità: una fotografia curiosa ma utile delle preferenze di chi scrive CSS ogni giorno.
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.
Articolo originale: https://frontendfacile.it/blog/sondaggi-fast-money-sul-css-cosa-amiamo-davvero-e-cosa-dobbiamo-ancora-cercare-s
Top comments (0)