Optimiertes Styling in Blazor: Inline-Styles durch CSS-Klassen ersetzen

‍

Mit der zunehmenden Integration von Anwendungen, Webseiten und digitalem Know-how in Unternehmen wird es immer wichtiger, aktuelle Entwicklungsstandards zu befolgen. Front-End-Entwickler*innen stoßen oft auf Codezeilen, die wie das folgende Beispiel aussehen:

‍

‍

Diese Codezeilen veranschaulichen, wie ein kleiner Teil einer Anwendung gestaltet wird. Würde die gesamte Anwendung auf jeder Seite und Komponente durch Inline-Styles gestaltet, führte dies zu einem übermäßigen Code-Volumen und erschwerte sowohl das Refactoring als auch die Wartung der Anwendung. Das Lesen und Verstehen des Codes würde deutlich mehr Zeit in Anspruch nehmen.

‍

Wann sollten Inline-Styles vermieden werden?

Die Nutzung von Inline-Styles gilt in vielen Fällen als überholt. Daher sollten Inline-Styles nur sparsam und nur dann eingesetzt werden, wenn es wirklich notwendig ist. Bereits ab mehreren Inline-Styles stellt sich die Frage, ob es nicht effizienter wäre, eine individuelle CSS-Klasse anzulegen.

‍

CSS-Klassen richtig benennen: Praktische Tipps

Bei der Anwendung von CSS-Klassen gibt es einige wichtige Regeln für die Benennung, um den Code übersichtlich und verständlich zu halten:

• Klassennamen kurz und präzise halten:
  • Ein Name wie „bottom-button-counter-component“ ist zwar präzise, aber sehr lang und schwer lesbar.
  • Eine prägnantere Bezeichnung könnte „counter-button“ sein. Dies ist eine von mehreren möglichen, effektiven Benennungen.

‍

Schritt-für-Schritt: Inline-Styles in Blazor-Komponenten auslagern

Nun beginnen wir damit, das Styling aus dem obigen Beispiel in eine separate CSS-Klasse zu überführen.

1. Erstellen einer isolierten CSS-Datei: Klicken Sie mit der rechten Maustaste auf Ihre Komponente, in diesem Beispiel „Counter.razor“, und wählen Sie „Create Isolated CSS“. Dies ermöglicht die Organisation von Styles innerhalb einer dedizierten CSS-Datei für die Komponente.

2. Klassennamen wählen und Styling übertragen: Entscheiden Sie sich für passende Klassennamen und fügen Sie das Inline-Styling in die neuen CSS-Klassen ein. Ein Beispiel für eine CSS-Struktur könnte wie folgt aussehen:

1.content-counter-wrapper {
2    display: flex;
3    flex-direction: column;
4    align-items: center;
5    gap: 0.25rem;
6}
7
8.label-counter-button {
9    color: brown;
10    font-size: 12px;
11}
12
13.counter-button {
14    border-radius: 0.25px;
15    background-color: darkgreen;
16    height: 25px;
17    color: white;
18    font-size: 14px;
19    display: flex;
20}

‍

3. Inline-Styles entfernen und CSS-Klassen zuweisen: Entfernen Sie das Inline-Styling aus der Komponente und binden Sie stattdessen die erstellten CSS-Klassen ein. Ihre Blazor-Komponente sollte jetzt wie folgt aussehen:

1<div class="content-counter-wrapper">
2    <div class="label-counter-button">Current count: @currentCount</div>
3    <button class="counter-button" @onclick="IncrementCount">Click me</button>
4</div>

‍

Durch das Auslagern des Inline-Stylings in separate CSS-Klassen wird der Code strukturiert und lesbarer. Der Einsatz klar benannter CSS-Klassen erleichtert die Wartung und Anpassung des Codes, besonders in größeren Projekten.

‍

Vorteile der Nutzung von CSS-Klassen in Blazor-Komponenten

Durch die Umstellung auf CSS-Klassen wird der Code deutlich lesbarer und besser wartbar. Die Trennung von Struktur (HTML) und Styling (CSS) ermöglicht es, das Styling unabhängig zu pflegen und anzupassen. Die Anwendung bleibt dadurch auch für nachfolgende Entwickler übersichtlich.

‍

Abschluss: Design-Verhalten überprüfen

Nachdem die Änderungen implementiert wurden, überprüfen Sie, ob sich das Design Ihrer Anwendung weiterhin wie gewünscht verhält. Testen Sie die Komponente gründlich, um sicherzustellen, dass die CSS-Klassen korrekt angewendet werden und das visuelle Erscheinungsbild stabil bleibt.