Share
Wenn Sie mit CSS-Präprozessoren wie Sass, Less (oder einer anderen Programmiersprache für diese Angelegenheit) arbeiten, nutzen Sie die Möglichkeiten von Variablen. Wenn Sie beim Variablieren jedoch spontan Ihre Variablennamen erstellen, ist die Kohärenz Ihrer Namenskonvention wahrscheinlich nicht gegeben. Sie sollten überlegen, Ihre Variablennamen (und Ihr Projekt für diese Angelegenheit) modular zu organisieren. Dies bringt Struktur und Einheit in Ihr Projekt als Ganzes, wodurch es einfacher wird, das Ganze zu verstehen und zu navigieren.
Angenommen, Sie benötigen eine Variable für die Textfarbe in Ihrem Projekt. Du könntest es nennen $ Textfarbe, oder solltest du es nennen $ color-text? Wie entscheidest du dich? Die zufällige Auswahl einer Option kann zu einer fehlenden Struktur beitragen, da sich die Anzahl der Variablen in Ihrem Projekt erhöht. Erfahrungsgemäß vergessen wir oft genau, wie wir Variablen für bestimmte Projekte benannt haben. Dies führt zu Verwirrung und zeitaufwändigen Methoden zum globalen Suchen und Ersetzen von Variablennamen.
Was wir brauchen, ist eine Regel zur Definition und Auswahl unserer Variablennamen. Um die Modularität in Ihrem Projekt zu erhalten, können Sie Variablen gruppieren, die Beziehungen und Gemeinsamkeiten aufweisen. Sie können sie dann benennen, indem Sie Wörter anordnen, die ihre Funktion von generisch zu spezifisch beschreiben (ganz ähnlich wie CSS mit Spezifität arbeitet) von links nach rechts.
Wenn ich zum Beispiel vier Variablen für vier verschiedene Randfarben habe, kann ich sie alle mit "border" beginnen (da dies der Oberbegriff ist, den sie alle gemeinsam haben) und mit einer Links-nach-Rechts-Lesart genauer beschrieben wird. Durch das Gruppieren und Benennen von Variablen auf diese Weise können Sie Ihren Code leichter lesen, verstehen und abrufen.
Nehmen wir an, wir arbeiten in SASS und möchten eine Reihe von Variablen erstellen, die die Farbpalette unseres Projekts definieren. Wenn wir mit einem blauen Farbton arbeiten, können wir einige Variablen wie diese erstellen:
$ blau; $ dunkelblau; $ mittelblau; $ dunkelstes Blau; $ hellblau; $ hellstes Blau;
Eine bessere Art, diese Variablen zu benennen, wäre, mit dem generischen Wort zu beginnen, das sie alle gemeinsam haben: blau. Dann können wir von links nach rechts genauer werden:
$ blau; $ blau-dunkel; $ blau-dunkelste; $ blaues Licht; $ blau-hellste;
Dies hilft nicht nur bei der Erinnerung, sondern ermöglicht auch einem Texteditor (wie Sublime Text, Coda usw.), auf einfache Weise Farben vorzuschlagen. Auf diese Weise müssen Sie sich nicht genau merken, wie Sie Ihre Variablen benannt haben. Stattdessen können Sie generisch starten und werden genauer, da der Texteditor Variablennamen automatisch vorschlägt. Alles, was Sie sich merken müssen, ist eine blaue Farbe. Also fängst du an zu tippen $ blau und Sie können eine Liste aller von Ihnen erstellten Blues erhalten!
Stellen Sie sich vor, ich arbeite an einem großen Projekt und habe alle meine Variablen, die Farbwerte enthalten, gruppiert, indem Sie ihnen das allgemeine Wort voranstellen, das alle gemeinsam haben: color.
// OK $ border-color; $ dunkle Rahmenfarbe; $ Lichtfarbenrand; $ highlight; $ link; $ link-dark; $ text; $ color-text; $ link-color-light; $ hellste Textfarbe;
// Besserer $ color-border; $ color-border-dark; $ color-border-light; $ Farbhervorhebung; $ color-link; $ color-link-dark; $ color-link-light; $ color-text; $ color-text-light; $ color-text-lightest;
Nehmen wir an, ich brauche eine Farbe für eine Umrandung. Ich beginne zu tippen Grenze: 1px fester $ colo und mein Texteditor kann alle Farbvariablen vorschlagen, die ich für mein Projekt definiert habe.
Vielleicht habe ich viele Farben in meinem Projekt, aber ich möchte nur Randfarben. Ich könnte ein paar Variablen mit meinen gewünschten Randfarben vordefinieren. Beim Codieren kann ich dann einfach die Spezifität meines Variablennamens einschränken Rahmen: 1px einfarbiger $ Farbrand Mein Texteditor schlägt automatisch alle Variablen vor, die ich durch dieses Präfix habe. Alles was ich tun muss, ist diejenige zu wählen, die ich will!
Selbst wenn Sie keine Code-Hinweise haben, ist dies dennoch eine effektive Möglichkeit, Ihre Variablen zu benennen. Es hilft Ihnen dabei, sich leicht zu merken, wie Sie Variablen benannt haben, weil Variablen, die Beziehungen teilen, Präfixe gemeinsam nutzen.
Wenn Sie Ihre Variablen auf diese modulare Weise benennen, können Sie Ihr Projekt konzeptionell verstehen, bevor Sie Code schreiben, während Sie codieren und nachdem Sie Code programmiert haben. Es ist eine Win-Win-Win-Situation!
Accentsconagua