Mit Bootstrap 5 – Design lesbarer gestalten

In den bereits vorangegangenen Artikeln „Individuelle CSS-Klassen einsetzen“ und „Code lesbar gestalten“ wurde erläutert, wie weniger Code eingesetzt werden kann, um Wartbarkeit und Lesbarkeit zu erhöhen.

Dieser Artikel zeigt, wie der Code weiter reduziert werden kann, indem Bootstrap 5 verwendet wird. Damit lassen sich individuelle CSS-Klassen oftmals vermeiden.

‍

Rückblick: Ein Blick auf bisherige Codebeispiele

Betrachten wir zunächst Codezeilen, die im Artikel „Individuelle CSS-Klassen einsetzen“ behandelt wurden:

<div style="display:flex;flex-direction:column;align-items:center;gap:0.25rem;">
    <div style="color:brown;font-size:12px;">Current count: @currentCount</div>
    <button style="border-radius:0.25px; background-color:darkgreen;height:25px;color:white;font-size:14px;display:flex">Click me</button>
</div>

Dieser Code kann durch die Kombination von Bootstrap 5 und individuellen CSS-Klassen lesbarer und wartbarer gestaltet werden. Nachfolgend wird Schritt für Schritt erläutert, wie dies umgesetzt werden kann.
‍

Optimierung mit Bootstrap 5

Beginnen wir mit der ersten Zeile:

<div class="d-flex flex-column align-items-center gap-1">
    <div style="color:brown;font-size:12px;">Current count: @currentCount</div>
    <button style="border-radius:0.25px; background-color:darkgreen;height:25px;color:white;font-size:14px;display:flex">Click me</button>
</div>

In diesem Beispiel wurde z. B. display:flex durch die Bootstrap-5-Klasse d-flex ersetzt. Hier wurde vollständig auf individuelle CSS-Klassen verzichtet.
‍

Kombination von Bootstrap 5 und individuellen CSS-Klassen

Im nächsten Schritt kombinieren wir Bootstrap 5 mit individuellen CSS-Klassen. Starten wir zunächst mit Bootstrap 5:

<div class="d-flex flex-column align-items-center gap-1">
    <div style="color:brown;font-size:12px;">Current count: @currentCount</div>
    <button class="d-flex rounded-2 py-1 background-color:darkgreen;color:white;font-size:14px">Click me</button>
</div>

Im Anschluss werden individuelle CSS-Klassen ergänzt:

.label-counter-button {
    color: brown;
    font-size: 12px;
}

.counter-button {
    background-color: darkgreen;
    color: white;
    font-size: 14px;
}

<div class="d-flex flex-column align-items-center gap-1">
    <div class="label-counter-button">Current count: @currentCount</div>
    <button class="d-flex rounded-2 py-1 counter-button">Click me</button>
</div>

‍

Fazit: Effizientere und wartbare Code-Strukturen

Wie Sie sehen, wurden die individuellen CSS-Klassen nach den Bootstrap-5-Klassen eingefügt. Dies spart Zeichen und vereinfacht die Wartung. Durch die strategische Kombination von Bootstrap-Standardklassen und individuellen Anpassungen wird nicht nur die Lesbarkeit erhöht, sondern auch die Flexibilität beim Styling verbessert.