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

63

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?

Setzen Sie Monica wieder ein
quelle
38
Was ist eine Zeichnung, wenn nicht ein zufälliger Haufen magischer Zahlen (denken Sie an Striche zwischen 2 (x, y) Punkten oder Arrays von Pixeln usw.), die zufällig gut aussehen?
68
Hat CSS Variablen? Funktioniert SVG?
Oded
36
Aus diesem Grund haben viele größere Projekte einen CSS-Präprozessor wie SASS oder LESS, der Variablen unterstützt.
Ixrec
2
@Oded Für CSS gibt es eine 40% ige globale Unterstützung für Variablen (daher nicht zu empfehlen, es sei denn, Sie möchten Ihren Microsoft-Besuchern mitteilen, dass sie nicht willkommen sind). Microsoft wird wahrscheinlich dem Trend bei Edge folgen und mobile Geräte werden irgendwann aufholen. SVG hingegen hat das Konzept von Variablen in einigen abgelehnten Statusdokumenten, aber sie werden wahrscheinlich nie implementiert.
Phyrfox
12
Warum? Weil sie keine magischen Zahlen sind. CSS enthält Daten, anders als ein Programm, das Anweisungen enthält. Obwohl CSS wahrscheinlich vollständig ist, handelt es sich nicht um eine Programmiersprache.
Derek 朕 朕 功夫

Antworten:

118

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.

JacquesB
quelle
16
Einige Werte werden in der Tat nur gewählt, weil "sie gut aussehen". In dem Beispiel, in dem das verknüpfte OP mehrmals denselben Wert enthält, ist jedoch nicht klar, ob sie dasselbe darstellen oder nur zufällig denselben Wert haben. Außerdem wird ein Wert verwendet, bei 198pxdem es sich um den Unterschied zwischen der Größe von etwas anderem ( 200px) und einem Rahmen handelt 2px.
CodesInChaos
1
@CodesInChaos: Ja, es gibt Fälle, in denen Variablen oder Abhängigkeitsausdrücke cool wären.
JacquesB
21
Beachten Sie, dass CSS funktioniert Unterstützung Variablen
phihag
28
@phihag In den Spezifikationen, ja, aber in der freien Natur , nicht so sehr (Ich glaube nicht , 40% globale Unterstützung zum Zeitpunkt des Kommentars als „weitgehend unterstützt . “ Aber du hast Recht wenn er sagt , dass in der In Zukunft werden wir CSS-Variablen haben. Und ich habe heute etwas Neues gelernt, also danke dafür.
phyrfox
2
@JaredSmith Es ist in Ordnung für eine relativ große Webanwendung, aber für häufig verwendete (möglicherweise statische) Seiten, einschließlich einer großen Polyfüllung, ist es ein Overkill.
Derek 朕 會 功夫
81

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.

Karl Bielefeldt
quelle
22
+1 weil: "Es ist akzeptabel, weil diese Formate nicht Code, sondern Daten sind."
Pieter B
1
"Zugegeben, es gibt Situationen, in denen es hilfreich ist, eine Wiederholung zu vermeiden, z. - Wahrscheinlich sowieso besser mit Klassen .main_color { color: .. }
:,
Code, der das Erscheinungsbild einer Anwendung bestimmt, ist weiterhin Code und keine Daten.
ESR
26

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.

kandierte_orange
quelle
4
Wenn Sie genug Objekte hatten, um eine Variable zu benötigen, haben Sie genug Objekte, um eine neue Klasse zu erstellen.
Jaketr00
1
Dies ist die beste Antwort, da sie den Punkt zeigt: Das sind keine magischen Zahlen.
TheBlastOne
2
"5 Objekte, die alle die gleiche Breite haben mussten und jeweils unabhängig voneinander ihre Breite fest codierten, würde ich dich mit einem Stock schlagen." Willkommen in der lustigen Welt des Webdesigns.
Whatsisname
2
Magische Zahlen sind nicht nur problematisch, weil "Entscheidungen an einem Ort treffen" (auch bekannt als DRY), sondern auch, weil sie schwer zu verstehen sind.
Sleske
Gibt es eine Alternative, um mit einem Stock geschlagen zu werden?
Djechlin
11

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 :-)

Dorus
quelle
Warum ist es wichtig, wo die Redundanz ist? Ist die Wartung nicht ein Problem, egal wo sie ist?
Peter Mortensen
@PeterMortensen Dies ist immer eine Überlegung zwischen geringer Entwicklungszeit oder hoher Wartbarkeit. Hohe Redundanz ist einfach zu entwickeln, da Sie hier und da schnell Änderungen vornehmen können. Geringe Redundanz ist wartungsfreundlich, da Sie den globalen Stil schnell ändern können. In der Praxis möchten Sie irgendwo dazwischen sein, weil es angesichts des globalen Stils viel einfacher ist, sogar neue Seiten hinzuzufügen, aber es dauert ewig, bis sich jedes letzte undurchsichtige Feature an einer möglichen globalen Stiländerung festhält.
Dorus
Es ist gut, CSS hat Funktionen in beide Richtungen. Und es ist Sache des Webentwicklers, zu entscheiden, wie viel Zeit für die Reduzierung der Redundanz und die Erhöhung der Wartbarkeit aufgewendet werden soll oder wie viel Zeit für das Herausarbeiten neuer Seiten / Funktionen aufgewendet werden soll. Interessanterweise gilt das Gleiche für jede andere Programmiersprache, in der Sie Monate damit verbringen können, das perfekte Design zu entwerfen, oder Tage damit, Ihr Programm herunterzufahren, und Monate damit, unmögliche Fehler aufzuspüren.
Dorus
Interessanterweise bin ich gerade auf diese Frage gestoßen, bei der es darum geht, die Abstraktion zu weit zu treiben und sowohl Wartbarkeit als auch Entwicklungszeit zu verlieren.
Dorus
5

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.

Jackson
quelle