Utilities Text CSS Framework
Utilities, Text, CSS und Framework sind hier der Kern, weil Text in Dokus ständig angepasst werden muss.
Text-Utilities sind die kleinen Helfer, die du bei Dokumentation sofort brauchst: links, mittig, rechts ausrichten, Text kürzen, oder automatische Silbentrennung aktivieren. Das sind keine Components, weil sie nicht „ein Element“ definieren, sondern ein Verhalten. Wenn du das sauber als Utility hältst, bleibt dein CSS leicht und du musst nicht für jede Textstelle eine eigene Klasse erfinden.
<p class="text-left">Links ausgerichtet.</p>
<p class="text-center">Zentriert.</p>
<p class="text-right">Rechts ausgerichtet.</p>Truncate und Hyphenation
Truncate ist praktisch für kleine Listen, z. B. wenn Titel zu lang sind. Hyphenation hilft bei langen deutschen Wörtern, aber nur wenn die Sprache im Dokument korrekt gesetzt ist. Darum ist lang="de" im html Tag sinnvoll. Das ist so ein Detail, das man gerne vergisst, aber es macht wirklich einen Unterschied, gerade auf mobilen Screens.
<html lang="de">
<p class="text-truncate">Sehr langer Text der in einer Zeile bleiben soll...</p>Text Utilities passen zur Framework-Struktur
In der Schichtenlogik stehen Text-Utilities am Ende, weil sie punktuell überschreiben dürfen. Du nutzt sie, wenn der Content grundsätzlich stimmt, aber an einer Stelle eine Ausrichtung anders sein muss. Das ist okay. Wenn du aber überall Text-Utilities stapelst, dann ist das ein Zeichen, dass dein Content- oder Component-Layer noch nicht sauber ist. Ich finde es hilfreich, das ehrlich zu beobachten, sonst baut man sich langsam ein System aus Workarounds, und dann fühlt sich alles irgendwie wacklig an, obwohl es technisch läuft.
Alles zusammen ansehen
Wenn du die Struktur verstanden hast, wirkt ein CSS-Framework plötzlich ziemlich logisch.