Normalerweise hat ein Projekt eine Reihe von vorbestimmten Schriftgrößen, normalerweise als Variablen, die so genannt werden, die einen Anschein von Ordnung und Konsistenz einholen. Jedes Projekt mit beträchtlicher Größe kann so etwas verwenden. Es gibt immer Überschriften, Absätze, Listen usw. Sie könnten die Schriftgrößen explizit und direkt überall festlegen (z. B. Schriftgröße: 18px). RAW CSS, sozusagen. Ich sehe das gelegentlich - nicht nur Größen, sondern auch Einheiten wie PX, REM und Em im sinnlosen Chaos.

Deshalb verwendet das CSS eines Projekts in der Regel Variablen oder Mixins - wir schießen nach Struktur, Wartbarkeit und letztendlich Konsistenz. Wir alle wissen, dass die Benennung schwierig ist und es nicht viel weiter aussieht, als die Variablen der Schriftgröße zu benennen, um zu sehen, warum. Wie sollten wir eine kleine Schriftgrößenvariable nennen, sodass klar ist, dass sie kleiner als eine große Schriftgrößenvariable ist? Und was passiert, wenn wir eine neue Variable dazwischen einfügen müssen - wird das so genannt, dass seine Beziehung zu den anderen Größenvariablen eindeutig erklärt wird?

Wir werden weiterhin über die Benennung von Schriftgrößenvariablen in diesem Beitrag sprechen. Das Problem erstreckt sich jedoch über die Schriftgrößen über jede Art von Größe oder Länge. Denken Sie an Paddings, Ränder, Breiten, Höhen, Grenzradien usw. Diese Dinge brauchen auch Struktur und Konsistenz!

Wie definieren Sie Schriftgrößen in Ihrem Projekt? Sieht es mit benutzerdefinierten Variablen aus:

:Wurzel { / * Schriftgrößenvariablen *// -Small: 12px; -Medium: 16px; -Large: 24px; }

:root {
  /* Font size variables */
  --small: 12px;
  --medium: 16px;
  --large: 24px;
}

oder vielleicht in sass (was wir in diesem Artikel verwenden werden) Sie haben möglicherweise Variablen für $ Small, $ Medium und $ große Schriftgrößen.

Bußgeld. Nehmen wir nach einer Weile an, der Designer fügt einen neuen

für einen Heldenabschnitt hinzu. Und es ist

sehr groß. Größer als alles, was Sie im Projekt haben. Kein Problem, du antwortest. Sie fügen dem Projekt einen $ xlarge hinzu und gehen in Ihrem Tag.

Am folgenden Tag macht der Designer ein schönes Formular -Label, das wieder eine neue Schriftgröße hat. Diese neue Größe ist jedoch größer als klein, aber kleiner als mittel.

Auf geht's.

Wie solltest du es nennen? $ Small-Medium? $ small-2? $ smedium? Wie auch immer Sie es nennen, Sie werden damit nicht zufrieden sein. Weil es dafür kein Wort gibt.

oder sollten Sie es vielleicht umrüsten? Erstellen Sie ein neues $ xsmall und ändern Sie alle Instanzen von $ small auf $ xsmall? Und dann können Sie $ Small für das Formular Label verwenden? Es besteht ein kleines Risiko, dass Sie vergessen werden, sich irgendwo zu ändern, und hey, Presto: ein Fehler. Was passiert das nächste Mal, wenn etwas eingeführt wird, das eine größere Größe als der Variable -Wert $ hat? Müssen wir auch $ groß und $ xlarge wieder aufrüsten?

Ich schlage vor, immer eine Skala zu halten. Eine einfache Lösung wäre die weitere Abstraktion, möglicherweise Zahlen und Größen zugunsten funktionaler Namen, wie $ form-label anstelle von $ small-2 oder $ xsmall.

aber stellen Sie sich vor, eine Reihe von Schriftgrößen wie diese zu haben:

$ small: 12px; $ form-label: 14px; $ Medium: 16px; $ groß: 24px;

$small: 12px;
$form-label: 14px;
$medium: 16px;
$large: 24px;

Das ist eine kaputte Skala. Es ist ein Größenkonzept und ein Komponentenkonzept, das zusammengemischt ist. Es wirft Fragen auf. Sollte eine Warnung oder eine Taste $ formal-label verwenden dürfen? Yuck.

Vielleicht haben Sie eine griechische Sache im Gange, die Variablen $ alpha, $ beta, $ gamma nennen? Lassen Sie mich Sie dann fragen, was ist dann größer als $ Alpha? $ alpha-large? Oder warte, ist $ alpha die

small eins?

Ich habe auch Namen wie $ button-font-Größe, $ label-font-Größe, $ blockquote-font-Größe gesehen. Das scheint mir wie eine Variable pro verwendetes Element anstelle einer Skala zu sein, und klingt so, als ob es sich um eine Menge doppelter Code handelt, wenn derselbe Wert an mehreren Stellen verwendet wird, jedoch mit unterschiedlichen Namen.

Vielleicht arbeiten Sie nur mit einer Basis -Schriftgröße und einem Prozentsatz? Sicher, aber ich würde sagen, Sie brauchen Variablen für die Prozentsätze. So behandelt Geoff die Schriftzug und sogar zugibt, dass das Setup seine eigenen Augenbrauen hebt. Berechnungen mit subjektiv benannten Variablen mögen Ihnen klar sein, aber verrückt aussehend und kompliziert für alle anderen, die in das Projekt springen.

h1 { Schriftgröße: Clamp (var (-textgröße), Calc (var (-Textgröße) * var (-textgröße-scaler)), var (-textgröße-huge)); }

h1 {
  font-size: clamp(var(--text-size-large), calc(var(--text-size-base) * var(--text-size-scaler)), var(--text-size-huge));
}

Wir brauchen ein besseres System

Hinzufügen und Entfernen von Zeug

ständig ist die Art und Weise, wie wir wollen zu arbeiten. Dies ist die moderne Entwicklung - MVP , agil und alle anderen heißen Schlagworte.

Was wir brauchen, ist eine Skalensyntax, die Raum für Änderungen ermöglicht. Das Hinzufügen einer neuen Größe in die Skala sollte einfach sein, ohne Break -Änderungen einzuführen. Ich denke an eine Art von Skala, die sowohl

flexible als auch infinite ist. Es muss anspruchsvoller sein als $ Small, $ Medium und $ groß.

Es sollte auch

deskriptive und intuitive sein. Vorzugsweise sollten Sie die Variablennamen in der Einstellungsdatei oder in der Konfiguration oder wo immer Sie diese Dinge speichern. Ich habe nicht die geringste Ahnung, ob $ Epsilon vor oder nach $ Sigma kommt. Tust du?

Verwenden von vorhandenen Systemen

Gibt es vor dem Versuch, etwas Neues zu erfinden, eine vorhandene Syntax oder ein System, das wir nutzen können? Hier sind einige, die ich begegnet bin.

Internationales System der Einheiten

sind sicher mit Begriffen wie "Kilobyte" und "Megabyte" vertraut. Die Europäer sind sehr an „Millimeter“ und „Zentimeter“ gewöhnt. Andere Beispiele sind "Giga", "Tera" und "Peta". Diese Präfixe können für Länge, Gewicht, Volumen und mehr verwendet werden. Könnte eine $ Centi -Schriftgröße funktionieren? Es ist bis zu einem gewissen Grad intuitiv, wenn Sie mit dem metrischen System vertraut sind. Dies ist eine endliche Skala. Und es gibt keinen Raum, um neue Größen hinzuzufügen, weil sie bereits festgelegt sind.

traditionelle Namensgröße Namen

Lange vor Computern und Desktop -Veröffentlichungen wurden Bücher und Zeitungen mit Leadyp gedruckt. Die Typ -Setzer hatten unterschiedliche Namen für verschiedene Größen. Die Größen haben einen Hinweis auf eine Punktgröße (PT) und könnten theoretisch für Pixelgrößen (PX) verwendet werden.

Die Typgrößen in diesem System werden als "non -pareil", "pica", "cicero" und "großer Grundierung" bezeichnet, um nur einige zu nennen. Die Namen unterscheiden sich je nach Kontinent und Land. Außerdem kann der gleiche Name unterschiedliche Größen haben, also… ziemlich verwirrend.

Das heißt, ich mag dieses System auf eine Weise, weil es so wäre, als würde es aus vergangenen Zeiten Respekt gegenüber einer alten Handwerkskunst zahlen. Aber die Namen sind so seltsam und speziell für die Typ -Größe gedacht, dass es sich wie eine Strecke anfühlt, die für Dinge wie Haltepunkte und Abstand verwendet werden kann.

alltägliche Objekte auf einer Skala platzieren

Wie wäre es mit Sachen aus unserem Alltag? Sag Chili Peppers.

Es gibt viele Arten von Chilischoten. Der $ Habanero ist heißer als der $ Cayenne, der heißer ist als der $ jalapeno. Das wäre Spaß, ja?

Aber so sehr ich die Idee des Schreibens einer Schriftgröße genieße: $ tabasco, ich sehe zwei Probleme. Wenn Sie sich nicht mit Paprika beschäftigen, können Sie nicht wissen, welcher Pfeffer heißer ist als ein anderer Pfeffer - es ist also nicht universell intuitiv. Außerdem ist der Paprika auf der Scoville -Skala 0 und nichts darunter. Carolina Reaper ist der heißeste Pfeffer der Welt, also ist die Skala endlich.

und ja, peppers skalisch sind nicht größer oder kleiner, sie sind heißer. Schlechtes Konzept. Vielleicht etwas häufiger, wie Arten von Bällen?

Es gibt eine große Auswahl verschiedener Arten von Bällen. Sie haben Handballs, Fußballkugeln, Volleyballs usw. Brauchen Sie etwas größeres als einen Medizinball? Verwenden Sie $ Beach. Etwas kleineres als ein Tennisball? Verwenden Sie $ pingpong. Dies ist sehr intuitiv, wie ich mir vorstellen kann, dass jeder irgendwann mit allen möglichen Bällen gespielt hat oder zumindest aus dem Sport vertraut ist.

Aber ist ein Ping -Pong -Ball größer als ein Golfball? Wer weiß? Außerdem haben ein Bowlingkugel und ein Fußballkugel tatsächlich die gleiche Größe. Also ... wieder nicht perfekt.

Die Skalierung auf Planeten könnte funktionieren, aber Sie müssten sich in der Astronomie kennenlernen.

Wie wäre es mit direkten Zahlen? Wir können nicht allein Zahlen verwenden, da Tools wie Stylelinter protestieren werden. Aber würde so etwas wie diese funktionieren:

$ font-14: 14px; $ font-16: 16px; $ font-24: 24px;

$small: 12px;
$form-label: 14px;
$medium: 16px;
$large: 24px;

Nun, es ist unendlich, da es immer Platz für neue Ergänzungen gibt. Aber es ist auch unglaublich spezifisch und es gibt einige Nachteile, damit der tatsächliche Wert Teil des Namens ist. Nehmen wir an, dass $ font-18 an vielen Orten verwendet wird. Und jetzt, so sagen sie, müssen alle Orte mit 18px auf 19px geändert werden (weil sie Gründe). Jetzt müssen wir die Variable von $ font-18 auf $ font-19 umbenennen und dann den Wert von $ font-19 von 18px auf 19px ändern. Und bevor wir endlich alle Orte mit $ font-18 bis $ font-19 aktualisieren. Dies ist fast wie die Verwendung von RAW -CSS. Niedrige Punktzahl für Wartbarkeit.

Was ist mit dem Tierreich?

Mutter Natur hat eine Vielzahl von Arten auf dieser Erde bereitgestellt, was in dieser Situation nützlich ist. Stellen Sie sich so etwas vor:

$ maus: 12px; $ Dog: 16px; $ hippo: 24px;

$small: 12px;
$form-label: 14px;
$medium: 16px;
$large: 24px;

Brauchen Sie etwas kleineres als eine Maus? Verwenden Sie $ Bee, $ Ant oder $ Flea. Größer als ein Bär? Probieren Sie $ Moose oder $ Hippo. Größer als ein Elefant? Nun, Sie haben den $ Whale oder heck, wir können prähistorisch gehen und $ t-Rex verwenden. Hier gibt es immer ein Tier, das man drücken kann. Sehr vielseitig, sehr intuitiv, ebenfalls unendlich (fast). Und Spaß auch-es würde mir nichts ausmachen, Schriftgröße zu machen: $ Squirrel. ?

aber andererseits, selbst dies muss möglicherweise auf die Variablen verweisen, es sei denn, wir wissen genau, welche Tiere in unserem Zoo von Schriftarten enthalten sind. Aber vielleicht ist das keine große Sache, solange es skaliert.

Ich habe viel zu viel Zeit damit verbracht, darüber nachzudenken

oder habe ich? In der Codebasis verbringen Sie Ihre Arbeitszeiten. Es ist Ihre Arbeitsumgebung, genau wie Stühle und Monitore. Und der Arbeitsplatz sollte ein schöner Ort sein.

Wie gehen Sie mit Ihren Schriftgrößenskalen um? Haben Sie ein System für Schriftarten und ein anderes für Dinge wie Margen? Kann jemand direkt in Ihren Code springen und verstehen, wie alles organisiert ist? Bitte erzählen Sie in den Kommentaren!