Warum sind große Mengen an magischen Zahlen in CSS und SVGs akzeptabel?

Oft sehe ich Fragen über die Hot - Netzwerk Fragen Liste wie diese , die im Grunde fragen : „Wie kann ich in CSS diese willkürliche Form zeichnen“. Die Antwort besteht ausnahmslos aus einigen CSS- oder SVG-Datenblöcken mit einer Reihe scheinbar zufälliger, fest codierter Werte, die die angeforderte Form bilden.

Wenn ich mir das ansehe, denke ich: 'Yuck! Was für ein hässlicher Codeblock. Ich hoffe, ich sehe solche Sachen nie in meinem Projekt. Allerdings sehe ich diese Art von Fragen und Antworten ziemlich häufig und mit einer hohen Anzahl von positiven Stimmen, so dass die Community sie offensichtlich nicht für schlecht hält.

Aber warum ist das akzeptabel? Aus meiner Backend-Erfahrung heraus ergibt das für mich keinen Sinn. Warum ist es für CSS / SVG in Ordnung?

Erstens werden magische Werte beim Programmieren vermieden, indem Variablen oder Konstanten verwendet werden. CSS unterstützt keine Variablen. Selbst wenn magische Werte verpönt wären, hätten Sie keine große Auswahl (außer wenn Sie einen Präprozessor als SASS verwenden, aber Sie würden das nicht für ein einzelnes Snippet tun).

Zweitens sind Werte in einer domänenspezifischen Sprache wie CSS möglicherweise nicht so magisch. In der Programmierung ist eine magische Zahl eine Zahl, bei der die Bedeutung oder Absicht nicht offensichtlich ist. Wenn in einer Zeile steht:

x += 23;

Sie werden fragen "warum 23"? Was ist die Begründung? Eine Variable könnte die Absicht verdeutlichen:

x += defaultHttpTimeoutSeconds;

Dies liegt daran, dass eine einzelne Nummer im allgemeinen Code absolut alles bedeuten kann. Aber bedenken Sie CSS:

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

Die Höhe und Farbe sind keine Zauberei, weil die Bedeutung aus dem Kontext vollkommen klar wird. Und der Grund für die Wahl des spefic-Werts ist einfach, weil die Designer dachten, es würde gut aussehen. Das Einführen einer Variablen würde nichts nützen, da Sie sie sowieso nur mit " defaultBackgroundColor" und " defaultFontSize" bezeichnen würden.

Dies ist akzeptabel, da diese Formate kein Code , sondern Daten sind . Wenn Sie alle "magischen Zahlen" entfernen würden, würden Sie im Wesentlichen jedes Etikett duplizieren und am Ende lächerlich aussehende Dateien wie:

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

Jedes Mal, wenn Sie Daten ändern mussten, mussten Sie an zwei Stellen nachsehen. Zugegeben, es gibt Situationen, in denen es hilfreich ist, Doppelungen zu vermeiden, z. B. wenn Sie eine Farbe haben, die häufig wiederholt wird, und Sie möglicherweise Änderungen vornehmen möchten, um Themen zu ändern. Es gibt Präprozessoren und vorgeschlagene Erweiterungen, um diese Situationen zu lösen. Im Allgemeinen ist es jedoch wünschenswert, Zahlen zusammen mit der Struktur in einem Datenformat zu haben.

Das Verbot magischer Zahlen ist die ursprüngliche Version dieses Konstruktionsprinzips:

Treffen Sie Entscheidungen an einem Ort .

Aber das sind keine magischen Zahlen . Zumindest nicht, soweit es irgendeinen mir bekannten Coding-Styleguide betrifft.

Breite: 200px;
Höhe: 200px;

Sie sind deutlich gekennzeichnet. Klar, die Zahlen sind zufällig gleich. Aber die Breite ist die Breite und die Höhe ist die Höhe. Sie können unabhängig voneinander variieren.

Nun , wenn Sie fünf Objekte , die alle hatten die gleiche Breite haben und jeweils fest einprogrammiert unabhängig ihrer Breite würde ich Sie mit dem schlagen indirection Stick.

Ich würde sie nicht als magische Zahlen bezeichnen, wenn sie beschriftet wären, aber ich würde dich trotzdem mit dem Indirektionsstab schlagen.

Da CSS keine Programmiersprache ist, ist es die Konfigurationsdatei, die die variablen Daten für Ihr Programm enthält.

Derzeit ist CSS so leistungsfähig, dass Sie es tatsächlich programmieren können, aber das ist nicht der springende Punkt. Im Grunde ist es immer noch eine Stylesheet-Sprache .

Machen wir einen Schritt zurück. Stellen Sie sich vor, wir haben eine Programmiersprache, die auf einem Bildschirm zeichnen kann. Stellen Sie sich vor, wir möchten es so programmieren, dass es eine Webseite malt.

Zuerst würden wir Tonnen von magischen Zahlen in unseren Code eingeben. Die Randbreite, die Texthöhe, Einrückungen usw. usw.

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

Also extrahieren wir die magischen Zahlen und legen sie oben in unsere Datei.

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

Das ist ein bisschen hässlich. Wir lesen unsere Variablennummern lieber aus einer Konfigurationsdatei.

margin 100
table 500
text size 12

Mm, das ist ein bisschen unklar ... Was bedeuten diese Zahlen? Was bedeuten diese Namen? Lassen Sie es uns ein bisschen formalisieren.

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

Aber wissen Sie, wir möchten unser Programm ein wenig erweitern. Wir möchten auch, dass Seiten mit mehreren Tabellen, Seiten ohne Tabellen, Seiten mit Absätzen oder Schaltflächen und mehr gezeichnet werden. Fügen wir unserer Konfigurationsdatei Selektoren hinzu, damit wir angeben können, welcher Absatz eine größere Schriftart oder eine andere Textfarbe haben soll. Vielleicht können wir verschachtelte Elemente unterstützen, vielleicht können wir eine allgemeine Eigenschaft in unserer Konfigurationsdatei verwenden und sie dann mit einer bestimmten überschreiben Eins in ein paar verschachtelten Elementen.

Sie spüren, wohin das führt, und kommen schließlich als CSS an. (Und ein Browser, um es zu rendern.)

Sollten wir dann Funktionen zu unserer Konfigurationsdatei hinzufügen, damit wir wieder magische Zahlen vermeiden können? Variablen hinzufügen? Konfigurationsdatei für unsere CSS-Datei hinzufügen? Es fühlt sich ein bisschen sinnlos , wenn Sie unsere CSS - Datei erinnern , ist bereits , dass sehr gleiche Konfigurationsdatei.

Aber das stimmt natürlich nicht; Ihre CSS-Datei wird immer größer, und irgendwann treten die gleichen Probleme auf wie bei den ursprünglichen magischen Zahlen, die überall wiederholt werden, manchmal mit kleinen Transformationen usw.

Modernes CSS bietet jedoch viele Möglichkeiten, um diese Wiederholung zu vermeiden. Sie können Klassen verwenden, die für viele Elemente gelten, Sie können den Stil für alle divs festlegen , aber dann einen bestimmten überschreiben, und CSS 3 ermöglicht sogar eine Art von variabler Verwendung.

Das bedeutet nicht, dass Sie die CSS-Variable an jeder möglichen Stelle verwenden müssen. Verwenden Sie es dort, wo es Sinn macht, und verwenden Sie es dort, wo Sie Doppelarbeit vermeiden oder andere verfügbare Techniken nicht ausreichen.

Am Ende willst du auch nicht zu viele magische Zahlen in deiner Konfigurationsdatei haben :-)

Warum ist es für CSS / SVG [eine Reihe scheinbar zufälliger, fest codierter Werte] in Ordnung?

Es ist nicht in Ordnung. Es ist möglich , einfache ".css" -Dateien zu schreiben und zu pflegen, aber irgendwann werden zufällige hartcodierte Werte eine weit verbreitete Belastung.

Für alles andere als extrem einfache Webseiten müssen Sie entweder eine disziplinierte Such- und Ersetzungsstrategie entwickeln oder einen CSS-Präprozessor mit Variablen verwenden oder Stile über JavaScript definieren.