CSS: qual è la quantità minima di codice?

Robin Rendle, uno degli autori di CSS-Tricks, si è recentemente posto una domanda: qual è la quantità minima di codice CSS da utilizzare per ottenere delle pagine HTML che siano quantomeno decenti dal punto di vista della stilizzazione?

Rendle ha cercato di rispondere a questo quesito partendo dalla rimozione completa degli stili CSS dal suo sito Web, il risultato finale è stato quindi un blocco di codice composto da meno di una quindicina di righe.

Immagini e color-scheme

Per la realizzazione di quest'ultimo lo sviluppatore è partito dalle immagini con l'intenzione di renderle responsive e quindi adatte alla visualizzazione su qualsiasi dispositivo.

img {
  max-width: 100%;
}

In secondo luogo ha fatto ricorso alla proprietà color-scheme di CSS che permette di indicare quale schema di colori dovrebbe essere restituita tenendo conto delle preferenze di un utente:

html {
  color-scheme: light dark;
}

Lo scopo di questo passaggio è stato quindi quello di attivare un tema chiaro o scuro in base alle impostazioni di default.

Non sempre color-scheme garantisce che questo risultato venga raggiunto, Safari presenta ad esempio un bug nella colorazione dei link, ma tale comportamento limita solo la possibilità di passare automaticamente dal light mode al dark mode.

Il body

Per quanto riguarda il body, per i font si è fatto riferimento a quelli di sistema tenendo conto che sarebbero stati sufficienti a garantire un rendering ottimale:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",

Nel passaggio successivo sono state definiti i valori del padding per adattare i margini ai dispositivi dotati di display dalle dimensioni contenute:

body {
...
  padding: 0 15px;

Fatto questo l'autore ha stabilito una larghezza massima per l'elemento body, utile in caso di visualizzazione su schermi molto ampi, procedendo poi con le indicazioni relative alla grandezza dei font e della line-height in modo da rendere i contenuti più facilmente leggibili:

body {
...
  max-width: 650px;
  font-size: 115%;
  line-height: 1.4;
}

Da notare infine il ricorso alla proprietà white-space con cui specificare in che modo devono essere gestiti gli spazi bianchi all'interno di un elemento:

pre code {
  white-space: pre-wrap;
}

Nello specifico Rendle ha scelto di utilizzare il valore pre-wrap che indica al browser di preservare gli spazi bianchi.