Ein wichtiger Teil der Erstellung einer Anwendung besteht darin, sie schön und optisch ansprechend zu gestalten. Dadurch wird sichergestellt, dass Benutzer problemlos in der Anwendung navigieren und Inhalte im Allgemeinen genießen können.
Das zu lösende Problem
Ein häufiges Problem beim Entwerfen von Anwendungen mit CSS besteht darin, dass es so viele Möglichkeiten gibt, Dinge zu spezifizieren.
Größe
Beispielsweise können wir die Größe mit px, em, rem und % adressieren. Wenn wir nicht aufpassen, erhalten wir für einige Texte px und für andere em. Wir können auch unkontrollierbare EM-Größen haben, wenn wir Divs verschachteln!
Farben
Beim Erstellen einer App können die von uns verwendeten Farben einen großen Einfluss auf das Gesamtthema und das Benutzererlebnis beim Anzeigen von Inhalten haben. Die Wahl der richtigen Farbgruppe ist sehr wichtig, aber noch wichtiger ist es, die Farben konsistent zu halten.
Dies bringt uns zum Thema CSS-Themes. Ein Theme bedeutet im Wesentlichen die Verwendung eines wiederverwendbaren Wertesatzes im gesamten Stylesheet, der Flexibilität, Wartbarkeit und Konsistenz bietet. Dadurch sieht unsere Anwendung nicht nur sauber und gut gestaltet aus, es macht es auch einfacher und dynamischer, neue Änderungen zu verwalten.
CSS-Variablen erstellen
Um CSS-Variablen zu erstellen, verwenden wir einfach den folgenden Code
:root {
/* Colors */
--background-color: #5C6F68,
--primary-color: #A4F9C8,
--secondary-color: #A7FFF6,
--tertiary-color: #95D9C3,
/* Sizes */
--s1: 12px,
--s2: 16px,
--s3: 20px,
--s4: 32px,
--s5: 48px
}
Mit diesen CSS-Variableneinstellungen sind wir nun in der Lage, uns an einen standardisierten Satz an Farben und Schriftarten zu halten. Um auf Variablen zuzugreifen, müssen wir diese Variablen bei Bedarf lediglich von einer anderen Stelle aufrufen. Zum Beispiel,
<!-- html -->
<body>
<h1> Hello </h1>
<p> Hello World </p>
</body>
/* css */
h1 {
color: var(--primary-color);
font-size: var(--s4);
}
p {
color: var(--secondary-color);
font-size: var(--s2);
}
Durch die Verwendung von CSS-Variablen sieht unser CSS-Code sehr sauber und leicht lesbar aus. Bei größeren CSS-Dateien können wir durch die Verwendung von CSS-Variablen das gesamte Design der Anwendung ändern, wenn wir uns für eine Änderung des Farbschemas entscheiden. Ein Beispiel für einen solchen Anwendungsfall ist die Dunkelmodusfunktion einiger Apps, bei der durch Umschalten das gesamte Farbschema aller Komponenten geändert wird.
Weitere Tipps zu CSS-Variablen
Beim Stylen mit CSS stoßen wir häufig auf Probleme mit der Größe des Ansichtsfensters, die den Inhalt einer Komponente beschädigen oder verzerren können. Eine Strategie, die ich gelernt habe, um diese Probleme zu lindern, ist die Methode „clamp()“ in CSS. Die Klammermethode akzeptiert drei Klammerargumente (Minimum, bevorzugt, Maximum). Dadurch kann sich die Größe unseres Inhalts dynamisch basierend auf der Größe des Ansichtsfensters ändern, was uns dabei helfen kann, weniger Medienabfragecode zu schreiben und letztendlich dafür zu sorgen, dass unsere App konsistenter aussieht.
Der Typrechner von Utopia ist ein schnelles und einfaches Tool, mit dem wir diese benutzerdefinierten CSS-Schriftgrößenvariablen erstellen können. (https://utopia.fyi/type/calculator)
Durch Klicken auf den Link können wir die minimale und maximale Größe des Darstellungsfensters sowie die gewünschte Schrittweite für die Schriftgröße festlegen. Utopia generiert einen CSS-Code, den wir einfach kopieren und in CSS :root einfügen können.
Stellen Sie sicher, dass Sie das Kontrollkästchen „Geräte verwenden“ aktivieren!
Damit verfügen wir nun über einen kuratierten Satz von CSS-Variablen für die Schriftgröße, die wir in jedem unserer Projekte verwenden können!
Nutzen!
Wenn Sie dieser einfache Prozess nicht davon überzeugt hat, benutzerdefinierte CSS-Variablen zu verwenden, finden Sie hier eine Liste, die ihren Zweck noch einmal verdeutlicht:
Themen und Branding
Responsives Design
Konsistente Designsprache
Dynamische Stile
Medienabfragen Zugänglichkeit
Dunkel-
/Hellmodus
Bereichsstile
Einfache Wartung
Raster- und Flexbox-Layouts
Wiederverwendbare Komponenten
Debuggen und Anpassen
Ich hoffe, dieses Tutorial hilft Ihnen dabei, dynamischeren und saubereren CSS-Code zu erstellen. Vielen Dank für das Lesen meines Blogbeitrags!