Le unità CSS più usate “in produzione” non sono quelle che pensi

Quando si parla di unità CSS, la discussione si concentra quasi sempre su tipografia e layout: px contro rem, percentuali, viewport units e via dicendo. Ma guardando i siti “veri”, quelli che finiscono online tra CMS, componenti riusati e librerie stratificate, emergono abitudini un po’ diverse da quelle che ci raccontiamo nelle linee guida.

Il dato interessante non è solo quale unità vinca (spoiler: lo sappiamo tutti), ma quali unità entrano sorprendentemente nelle primissime posizioni. E soprattutto: cosa ci dice questo sul modo in cui scriviamo CSS nel quotidiano.

La top “reale”: vince px, poi em, e rem resta indietro

Tra le unità più presenti sui siti in produzione, px è stabilmente in testa. Non è un giudizio di valore: è la fotografia di un ecosistema dove convivono legacy, snippet copiati, componenti di terze parti e stili “pragmatici”.

La sorpresa vera è il secondo posto: em. Molti lo evitano perché può diventare una trappola quando si annida in profondità (il classico effetto valanga: un font-size in em dentro un altro font-size in em, e all’improvviso i calcoli non sono più intuitivi). Eppure è diffusissimo.

rem compare comunque molto, ma più in basso di quanto ci si aspetterebbe: è usato da una larga fetta di siti, però non domina la classifica. Questo contrasta con l’idea “moderna” secondo cui rem sarebbe la scelta standard per tipografia e spaziature scalabili.

Perché em batte spesso rem nella pratica?

Alcune spiegazioni plausibili (e che probabilmente hai già incontrato):

• Componenti e pattern storici: tanti snippet e librerie hanno adottato em anni fa per controllare elementi relativi al contesto (bottoni, badge, icone inline).
• Uso “localizzato”: em è pericoloso se lo usi per definire la tipografia a cascata, ma è molto utile se lo applichi a dettagli che devono scalare con il testo del componente, ad esempio padding di un bottone.
• CSS di terze parti: anche quando tu scrivi rem, spesso importi CSS che usa em.

I veri outsider in top 5: s e deg

Qui arriva la parte che spiazza: tra le unità più ricorrenti compaiono s (secondi) e deg (gradi).

Se stai pensando “ma io queste non le uso quasi mai”, probabilmente è perché il tuo cervello associa “unità CSS” a dimensioni. In realtà, una parte enorme del CSS moderno vive di:

• animazioni e transizioni → transition-duration: 200ms;, animation: ... 0.6s;
• trasformazioni → transform: rotate(12deg);

In siti reali, anche molto “semplici”, è comunissimo avere micro-interazioni: hover, accordion, menu, modali, slider, tooltip. E basta una sola libreria UI o un set di componenti per disseminare s e deg ovunque.

E le viewport units, le percentuali… com’è possibile che non siano tra le prime?

È controintuitivo, ma ha senso se la guardi dal punto di vista dell’adozione “media”:

• Le viewport units (vw, vh, ecc.) sono super utili, ma spesso non sono indispensabili: molte UI sono costruite con flex/grid, max-width e spacing in unità tipografiche.
• Le percentuali sono storiche, sì, ma nei layout moderni vengono spesso sostituite da flexbox/grid e da proprietà che riducono la necessità di width: 50% ovunque.
• In più, tanti fogli di stile “di produzione” hanno una grande densità di regole per motion (durate, delay, easing, rotazioni), che aumentano la frequenza di s e deg rispetto a quanto immaginiamo.

Implicazioni pratiche: scegliere unità “buone” senza combattere la realtà

Questa classifica non è un invito a tornare a fare tutto in px. È piuttosto un promemoria: il CSS che arriva in produzione è un miscuglio, e spesso le unità più usate sono quelle che risolvono problemi concreti velocemente.

Una strategia pragmatica può essere:

• Tipografia e spacing di sistema: preferisci rem per coerenza e accessibilità (rispetto del font size dell’utente).
• Componenti che devono scalare col testo (padding di bottoni, gap interni, icone inline): em è spesso la scelta più “naturale”, purché usata con consapevolezza.
• Dettagli di precisione e override: px resta utilissimo quando vuoi controllo assoluto (hairline, bordi, fix puntuali).
• Motion: tratta s/ms e deg come unità di primo livello, non come “cose da animazioni”: definisci token o variabili (es. --duration-fast, --rotate-sm) per evitare valori sparsi.

Sintesi

Se pensi alle unità CSS solo come strumenti per misurare layout, ti perdi metà del quadro. Nei siti reali dominano ancora px, em è più diffuso di quanto la sua reputazione lasci intendere, e nella top entrano unità legate al movimento (s) e alle trasformazioni (deg).

La lezione pratica è semplice: costruisci un sistema coerente (spesso rem + token), ma accetta che il CSS quotidiano vive anche di eccezioni e di “unità operative”. E soprattutto: considera motion e transform parte integrante della tua architettura CSS, non un dettaglio estetico dell’ultimo minuto.