Perché grandi quantità di numeri magici sono accettabili nei CSS e SVG?

In primo luogo, i valori magici sono evitati nella programmazione usando variabili o costanti. I CSS non supportano le variabili, quindi anche se i valori magici fossero corretti, non hai molta scelta (eccetto usare un preprocessore come SASS, ma non lo faresti per un singolo frammento).

In secondo luogo, i valori potrebbero non essere così magici in un linguaggio specifico del dominio come i CSS. Nella programmazione, un numero magico è un numero in cui il significato o l'intento non è ovvio. Se una linea dice:

x += 23;

Chiederai "perché 23"? Qual è il ragionamento? Una variabile potrebbe chiarire l'intento:

x += defaultHttpTimeoutSeconds;

Questo perché un numero solo può significare assolutamente qualsiasi cosa nel codice di scopo generale. Ma considera CSS:

background-color: #ffffff;
font-size: 16px;

L'altezza e il colore non sono magici, perché il significato è perfettamente chiaro dal contesto. E la ragione per scegliere il valore specifico è semplice perché i progettisti pensavano che sarebbe stato bello. L'introduzione di una variabile non aiuterebbe nulla, dal momento che lo chiameresti qualcosa come " defaultBackgroundColor " e " defaultFontSize " in ogni caso.

È accettabile perché questi formati non sono code , ma dati . Se dovessi rimuovere tutti i "numeri magici", dovresti essenzialmente duplicare ogni etichetta e finire con file dall'aspetto ridicolo come:

mainkite_width = 200px
...
.mainkite {
  width: mainkite_width;
  ...

Ogni volta che è necessario modificare alcuni dati, è necessario cercare in due punti. Certo, ci sono situazioni in cui è bello evitare la duplicazione, come se si avesse un colore che si ripete spesso e si potrebbe voler cambiare per cambiare i temi. Esistono preprocessori e estensioni proposte per affrontare tali situazioni, ma in generale, è auspicabile disporre di numeri insieme alla struttura in un formato dati.

La proibizione dei numeri magici è la versione primordiale di questo principio di design:

Prendi le decisioni in un unico posto .

Ma questi non sono numeri magici . Almeno, non per quanto riguarda la guida di uno stile di codifica che conosco.

width: 200px;
height: 200px;

Sono chiaramente etichettati. Certo, i numeri capita di essere lo stesso. Ma la larghezza è la larghezza e l'altezza è l'altezza. Sono progettati per variare in modo indipendente.

Ora se hai 5 oggetti che tutti hanno per avere la stessa larghezza e ciascuno ha codificato in modo indipendente la loro larghezza, ti batterò con indirection stick.

Non li chiamerei numeri magici se sono etichettati, ma mi piacerebbe comunque batterti con la indirection bastone.

Poiché il CSS non è un linguaggio di programmazione, è invece il file di configurazione che contiene i dati variabili per il tuo programma.

Attualmente il CSS è così potente che puoi in realtà programmare in esso, ma questo è oltre il punto. In pratica è ancora una lingua del foglio di stile .

Facciamo un passo indietro. Immagina di avere un linguaggio di programmazione che può disegnare su uno schermo. Immagina di voler programmarlo per dipingere una pagina web.

Inizialmente inseriremmo tonnellate di numeri magici nel nostro codice. La larghezza del margine, l'altezza del testo, le rientranze, ecc. Ecc.

jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)

Quindi estraiamo i numeri magici e li mettiamo in cima al nostro file.

int margin = 100
int table = 500
int text_size = 12
jump(margin) // The margin
drawTable(table, table)
writeText("Hello World", text_size)

Ora questo è un po 'brutto. Leggiamo piuttosto i nostri numeri variabili da un file di configurazione.

margin 100
table 500
text size 12

Mm, non è chiaro ... Cosa significano quei numeri? Cosa significano quei nomi? Formalizziamola un po '.

margin_left 10em
table_width 500px
table_height 500px
font_size 12px

Ma sai, vogliamo espandere un po 'il nostro programma. Vogliamo anche che disegni pagine con più tabelle, pagine senza tabelle, pagine con paragrafi o pulsanti e che altro. Aggiungiamo i selettori al nostro file di configurazione in modo che possiamo specificare quale paragrafo deve avere un font più grande, o un diverso colore del testo, forse possiamo supportare elementi nidificati, forse possiamo usare una proprietà generale nel nostro file di configurazione, e quindi sovrascriverlo con uno specifico uno in pochi elementi nidificati.

Senti dove sta andando, alla fine arrivi come CSS. (E un browser per renderlo.)

Dovremmo quindi aggiungere funzionalità al nostro file di configurazione in modo da poter evitare di nuovo i numeri magici? Aggiungi variabili? Aggiungi un file di configurazione per il nostro file CSS? Sembra un po 'inutile se ricordi che il nostro file CSS è quello stesso file di configurazione già.

Ma ovviamente non è vero; il tuo file CSS diventa sempre più grande e alla fine ti imbatti negli stessi problemi con i numeri magici originali, lo stesso numero ripetuto dappertutto, a volte con piccole trasformazioni, ecc.

Il CSS moderno tuttavia, consente molti modi per evitare questa ripetizione. Puoi usare le classi che si applicano a molti elementi, puoi impostare lo stile per tutti div s, ma poi sovrascriverne uno in particolare, e il CSS 3 consente persino un qualche tipo di utilizzo delle variabili.

Questo non significa che devi iniziare a utilizzare la variabile CSS in ogni posizione possibile. Usalo dove ha senso e usalo dove eviti la duplicazione o dove sono disponibili anche altre tecniche.

Alla fine, non vuoi troppi numeri magici nel tuo file di configurazione: -)

Why is it [a bunch of seemingly random hard-coded values] OK for CSS/SVG?

Non è OK. È possibile possibile scrivere e mantenere semplici file ".css", ma alla fine i valori casuali codificati diventeranno un peso prevalente.

Per qualcosa di diverso dalle pagine Web estremamente semplici, dovrai sviluppare una strategia "trova e sostituisci" disciplinata, oppure utilizzare un preprocessore CSS con variabili o definire stili tramite JavaScript.