BaseGUI.de

Space Utilities sind kleine Klassen für Abstand. Sie verhindern, dass überall neue Sonderregeln entstehen. Wenn du für jede Karte einen anderen Margin baust, wirkt alles ungleichmäßig. Mit einem abgestuften System, zum Beispiel 4, 8, 12, 16, 24 Pixel, bleibt es konsistent. Und du kannst im HTML schnell anpassen, ohne in CSS Dateien zu wühlen. Das ist besonders bei Doku Seiten angenehm, weil du oft Code-Boxen, Listen und Texte nebeneinander hast.

<div class="card mt-3">
  <h3>Karte</h3>
  <p>Ein Block mit definiertem Abstand nach oben.</p>
</div>

Ein Spacing-System ist ein Vertrag

Wenn dein Framework ein Spacing-System hat, ist das wie ein stiller Vertrag im Team. Alle nutzen dieselben Stufen. Dadurch passt es optisch zusammen, auch wenn unterschiedliche Seiten entstehen. Du musst nicht mathematisch perfekt sein, aber du solltest konsequent sein. Ich hab Projekte gesehen, wo 13px neben 17px existierte, einfach weil es „gerade gut aussah“, das endet irgendwann in Frust und man räumt dann wochenlang auf.

/* Beispiel-Utilities */
.mt-1{ margin-top:4px; }
.mt-2{ margin-top:8px; }
.mt-3{ margin-top:12px; }
.mt-4{ margin-top:16px; }

Utilities greifen über die Schichten, deshalb stehen sie am Ende. Du nutzt sie, wenn Base, Content, Objects und Components schon sinnvoll sind, aber an einer Stelle ein Abstand anders sein soll. Nicht als Dauerlösung, eher als feines Werkzeug. Wenn du merkst, dass du Space-Klassen überall brauchst, dann stimmt eventuell deine Component noch nicht. Das ist kein Drama, aber ein Signal. Und wenn du das ignorierst, wird das System schleichend unordentlich, obwohl es anfangs “ok” wirkt.