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

63

Spesso vedo domande sulla lista delle domande sulla rete calda come questa che sostanzialmente chiedono "come faccio a disegnare questa forma arbitraria in CSS". Invariabilmente la risposta è un paio di blocchi di dati CSS o SVG con un mucchio di valori apparentemente casuali codificati in modo rigido che formano la forma richiesta.

Quando guardo questo, penso 'Yuck! Che brutto blocco di codice. Spero di non vedere mai questo tipo di cose nel mio progetto '. Tuttavia, vedo questi tipi di domande e risposte abbastanza frequentemente e con un alto numero di voti, quindi chiaramente la comunità non pensa che siano cattivi.

Ma perché è accettabile? Venendo dalla mia esperienza di back-end, questo non ha senso per me. Allora perché è OK per CSS / SVG?

— Ripristina Monica
fonte

38

Che cos'è un disegno, se non un gruppo casuale di numeri magici (pensa a tratti tra 2 (x, y) punti o matrici di pixel, ecc.) Che sembrano belli?

68

I CSS hanno variabili? SVG?

— Oded,

36

Questo è il motivo per cui molti progetti di grandi dimensioni hanno un preprocessore CSS come SASS o LESS che supporta le variabili.

— Ixrec,

2

@Oded Per CSS, esiste un supporto globale del 40% per le variabili (quindi, sconsigliato a meno che non si desideri dire a tutti i visitatori Microsoft che non sono i benvenuti). Microsoft probabilmente seguirà la tendenza in Edge e i dispositivi mobili alla fine raggiungeranno. SVG, d'altra parte, ha il concetto di variabili in alcuni documenti di stato di bozza abbandonati, ma probabilmente non verranno mai implementati.

— phyrfox,

12

Perché? Perché non sono numeri magici. CSS contiene dati, a differenza di un programma che contiene istruzioni. Sebbene il CSS sia probabilmente in fase di completamento, non è un linguaggio di programmazione.

— Derek 朕會功夫

117

In primo luogo, i valori magici vengono evitati nella programmazione usando variabili o costanti. I CSS non supportano le variabili, quindi anche se i valori magici fossero disapprovati, non hai molta scelta (tranne 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 CSS. Nella programmazione, un numero magico è un numero in cui il significato o l'intento non sono evidenti. Se una riga dice:

x += 23;

Ti chiederai "why 23"? Qual è il ragionamento? Una variabile potrebbe chiarire l'intento:

x += defaultHttpTimeoutSeconds;

Questo perché un numero solitario potrebbe significare assolutamente qualsiasi cosa nel codice generico. 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 hanno pensato che sarebbe stato bello. L'introduzione di una variabile non sarebbe di alcun aiuto, dal momento che si chiamerebbe comunque qualcosa come " defaultBackgroundColor" e " defaultFontSize".

— JacquesB
fonte

16

Alcuni valori sono in effetti solo scelti perché "sembrano buoni". Ma l'esempio dell'OP collegato contiene lo stesso valore più volte, ma non è chiaro se rappresentano la stessa cosa o hanno lo stesso valore solo per coincidenza. Inoltre utilizza un valore la 198pxcui differenza è la dimensione di qualcos'altro ( 200px) e un 2pxbordo.

— CodesInChaos

1

@CodesInChaos: Sì, ci sono alcuni casi in cui le variabili o alcune espressioni di dipendenza sarebbero interessanti.

— JacquesB,

21

Si noti che i CSS fa le variabili di supporto

— phihag

28

@phihag Nelle specifiche, sì, ma in natura , non così tanto (non considero il supporto globale del 40% al momento di questo commento come "ampiamente supportato". Tuttavia, hai ragione nel dire che, nel futuro , avremo variabili CSS. E ho imparato qualcosa di nuovo oggi, quindi grazie per quello.

— phyrfox

2

@JaredSmith Va bene per una webapp su larga scala, tuttavia per le pagine comuni (forse statiche) che includono un enorme polyfill è eccessivo.

— Derek 朕會功夫

80

È accettabile perché questi formati non sono codice , ma dati . Se dovessi rimuovere tutti i "numeri magici", essenzialmente duplicheresti ogni etichetta e finirai 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 hai un colore che si ripete frequentemente e potresti voler cambiare per cambiare tema. Esistono preprocessori ed estensioni proposte per affrontare tali situazioni, ma in generale è preferibile disporre di numeri insieme alla struttura in un formato dati.

— Karl Bielefeldt
fonte

22

+1 perché: "È accettabile perché questi formati non sono codice, ma dati".

— Pieter B,

1

"Certo, ci sono situazioni in cui è bello evitare la duplicazione, come se hai un colore che si ripete frequentemente e potresti voler cambiare per cambiare tema." - Probabilmente fatto meglio con le classi .main_color { color: .. }

— :,

1

Il codice che determina l'aspetto di un'applicazione è ancora codice e non dati.

— ESR,

25

Il divieto di numeri magici è la versione primordiale di questo principio progettuale:

Prendi decisioni in un unico posto .

Ma questi non sono numeri magici . Almeno, per quanto riguarda qualsiasi guida di stile di programmazione che conosco.

larghezza: 200px;
altezza: 200 px;

Sono chiaramente etichettati. Certo, i numeri sembrano essere gli stessi. Ma la larghezza è la larghezza e l'altezza è l'altezza. Sono progettati per variare in modo indipendente.

Ora, se si dispone di 5 oggetti che tutti avevano di avere la stessa larghezza e ogni hardcoded in modo indipendente la loro larghezza avrei battuto con l'indirezione bastone.

Non li chiamerei numeri magici se fossero etichettati, ma ti batterei comunque con la levetta indiretta .

— candied_orange
fonte

4

Se hai abbastanza oggetti per aver bisogno di una variabile, hai abbastanza oggetti per creare una nuova classe.

— Jaketr00,

1

Questa è la risposta migliore, poiché mostra il punto: quelli non sono numeri magici.

— TheBlastOne

2

"5 oggetti che dovevano avere tutti la stessa larghezza e ognuno con codifica indipendente della propria larghezza ti avrei battuto con un bastone." Benvenuti nel divertente mondo del web design.

— whatsisname

2

I numeri magici non sono solo problematici a causa di "Prendi decisioni in un unico posto" (noto anche come DRY), ma anche perché sono difficili da capire.

— sleske,

Esiste un'alternativa all'essere battuti con un bastone?

— Djechlin,

10

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

Attualmente CSS è così potente che puoi effettivamente programmarlo, ma questo è oltre il punto. In sostanza è ancora un linguaggio per fogli di stile .

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

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

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

Quindi estraiamo i numeri magici e li inseriamo nel nostro file.

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

Questo è un po 'brutto. Preferiamo leggere i nostri numeri variabili da un file di configurazione.

margin 100
table 500
text size 12

Mm, è un po 'poco chiaro ... Cosa significano quei numeri? Cosa significano quei nomi? Formalizziamolo 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 selettori al nostro file di configurazione in modo da poter specificare quale paragrafo deve avere un carattere più grande o un colore di testo diverso, forse possiamo supportare elementi nidificati, forse possiamo usare una proprietà generale nel nostro file di configurazione e quindi sovrascriverlo con uno specifico uno su alcuni elementi nidificati.

Ti 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 nuovamente i numeri magici? Aggiungi variabili? Aggiungi un file di configurazione per il nostro file CSS? È un po 'inutile se ricordi che il nostro file CSS è già lo stesso file di configurazione.

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

I CSS moderni, tuttavia, consentono molti modi per evitare questa ripetizione. Puoi usare le classi che si applicano a molti elementi, puoi impostare lo stile per tutti gli divs, ma poi sovrascriverne uno in modo specifico e CSS 3 consente persino un tipo di utilizzo variabile.

Ciò non significa che è necessario iniziare a utilizzare la variabile CSS in ogni posizione possibile. Usalo dove ha senso e usalo dove eviti la duplicazione o dove altre tecniche disponibili non sono all'altezza.

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

— Dorus
fonte

Perché è importante dove si trova la ridondanza? La manutenzione non sarà un problema, non importa dove si trovi?

— Peter Mortensen,

@PeterMortensen Questa è sempre una considerazione tra basso tempo di sviluppo o alta manutenibilità. La ridondanza elevata è facile da sviluppare perché è possibile cambiare rapidamente le cose qua e là, la ridondanza ridotta è facile per la manutenzione perché è possibile cambiare rapidamente lo stile globale. In pratica, vuoi essere in qualche punto tra i due, perché affrontarlo, avere uno stile globale rende molto più facile anche aggiungere nuove pagine, ma avere l'ultima caratteristica oscura aderire a qualsiasi possibile cambiamento di stile globale richiede un'eternità per svilupparsi.

— Dorus,

È buono CSS ha funzionalità in entrambe le direzioni. E spetta allo sviluppatore web decidere quanto tempo spendere per ridurre la ridondanza e aumentare la manutenibilità o il tempo da dedicare allo sgretolamento di nuove pagine / funzionalità. Abbastanza interessante, lo stesso vale per qualsiasi altro linguaggio di programmazione in cui puoi trascorrere mesi per preparare il design perfetto, o giorni per colpire il tuo programma e mesi per cacciare bug impossibili.

— Dorus,

Abbastanza interessante mi sono appena imbattuto in questa domanda che parla di prendere l'astrazione troppo lontano e perdere sia la manutenibilità che i tempi di sviluppo.

— Dorus,

5

Perché [un insieme di valori apparentemente casuali codificati in modo casuale] OK per CSS / SVG?

Non va bene È possibile scrivere e mantenere semplici file ".css", ma alla fine i valori casuali codificati diventeranno un onere prevalente.

Per qualsiasi cosa diversa da pagine Web estremamente semplici, dovrai sviluppare una strategia "trova e sostituisci" disciplinata, oppure utilizzare un preprocessore CSS con variabili o definire stili tramite JavaScript.

— Jackson
fonte