Objects List CSS Framework

Objects, List, CSS und Framework gehören hier zusammen, weil Listen überall auftauchen.

Listen sind unterschätzt. In echten Projekten sind sie überall: Navigation, Suchergebnisse, Feature-Listen, FAQ, Artikelübersichten. Ein List-Object ist mehr als nur ul oder ol. Es ist ein Muster für Abstände, eventuell Trennlinien, und für eine klare Struktur, die auch ohne viel Design funktioniert. Wenn du es als Object behandelst, hältst du es neutral und wiederverwendbar.

<ul class="o-list">
  <li>Eintrag eins</li>
  <li>Eintrag zwei</li>
  <li>Eintrag drei</li>
</ul>

Abstände statt Spezialklassen

Ein Framework löst das oft mit einem Standard-Gap, statt jede Liste anders zu bauen. Du kannst zusätzlich mit Utilities nachziehen, aber die Grundlage sollte stabil sein. Ein häufiges Problem ist, dass Listen je nach Kontext anders aussehen, dann wirkt eine Website zerfranst. Mit einem Object hast du eine verlässliche Basis, und passt nur dort an, wo es wirklich nötig ist.

.o-list{ list-style:disc; padding-left:18px; }
.o-list li{ margin:6px 0; }

Objects stützen Components

Eine Card-Component kann intern eine Liste zeigen, und profitiert davon, wenn die Liste schon sauber ist. Dann muss die Card nicht alles neu definieren. Genau das ist der Sinn von Schichten: du baust nicht jedes Mal von null. Wenn du später refactorst, ist das ein Geschenk. Ich sag’s ehrlich, bei gewachsenen Projekten rettet das einem den Abend, weil du nicht in zwanzig Dateien suchen musst, warum etwas komisch aussieht.