BaseGUI.de

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, ggf. Trennlinien und eine klare Struktur, die auch ohne Design funktioniert. Wenn du es als Object behandelst, bleibt es neutral, und du kannst es in verschiedenen Components wiederverwenden.

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

Abstand ist wichtiger als Deko

In der Praxis wirkt eine Liste meist dann „richtig“, wenn sie genug Luft hat. Nicht zu viel, nicht zu wenig. Frameworks setzen dafür Standardwerte und lassen dir die Option, über Utilities nachzuziehen. Der Vorteil: du baust nicht für jede Liste neue Regeln. Und du bekommst ein konsistentes Bild über alle Seiten hinweg. Wenn du in Dokus viel Code zeigst, merkst du es sofort, wenn Listen daneben aus dem Takt geraten.

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

Listen als Baustein im System

Eine Card-Component kann intern eine Liste haben, genau wie eine Sidebar. Wenn die Liste schon sauber ist, muss die Card nicht alle Abstände nachbauen. Das ist der Sinn von Schichten: du baust nicht jedes Mal von null. Wenn du später refactorst, ist das ein Geschenk. Ich hab schon in Projekten gesessen, wo fünf Listen-Styles existierten, weil jede Seite „mal eben“ was anderes brauchte. Das rächt sich, und dann suchst du plötzlich länger nach CSS als nach dem eigentlichen Bug, das ist dann echt unerquicklich.

<aside class="card">
  <h3>Navigation</h3>
  <ul class="o-list">
    <li><a href="objects-grid.html">Grid</a></li>
  </ul>
</aside>