soupdidoup

“

Damit hätte ich nicht gerechnet! Auf mein lapidares Twitter-Gestöhne, man könne doch nicht <p></p>, <br><br><br> oder     verwenden, um sich Abstände in HTML/CSS-Layouts zurechtzuzimmern, kamen einige ernstgemeinte Rückfragen in Richtung: »Wie sollen wir es denn dann handhaben?« Dafür dieser Artikel.

Zunächst einmal: Der Grund, warum oben genannte Abstandstechniken uncool sind, ist eine Vermischung von Struktur und Styling. Ich packe damit das Styling-Vorhaben »horizontaler Abstand« und »vertikaler Abstand« in den HTML-Code, wo es nicht hingehört. HTML ist für die logisch-hierarchisch-semantische Struktur zuständig, und im CSS kümmert man sich um alles, was visuell zum Styling beiträgt, also auch die Abstände.

Für entsprechende vertikale Abstände nutzt man selbstredend margin und padding, und beschreibt damit die gewünschten Abstände vor und nach bestimmten Headlines und Absätzen. Gerne auch mittels :first-child oder :nth-child() die Abstände zwischen schwerer zu greifenden Konstellationen. Auch der Plus-Selektor (.content ul + p) kann wertvolle Dienste leisten, um dort Abstände zu setzen, wo sie sinnvoll sind.

Doch manchmal ist die Konstellation des Inhalts etwas ungünstig, denn man möchte bisweilen an bestimmten Stellen Abstände haben, wo vielleicht gerade kein besonderes Strukturelement gesetzt ist, der diesen Abstand mit sich bringt. Wenn man also in Gottes Namen ins HTML eingreifen muss, um genau zu definieren, wo denn nun der Abstand hin soll, verwendet man in der Regel das class-Attribut, hängt es an bestehende Elemente (z. B. p oder ul) und denkt sich sinnvolle Klassennamen aus, an die man dann per CSS Abstand zuweist.

Nicht cool sind dabei Klassen wie .large-space-top oder .bottom35, denn dabei handelt es sich um de-facto-Styling-Angaben. Auch diese haben in HTML nichts zu suchen.

Besser wären Klassen wie .teaser, .new-section oder keep-seperated, denn dabei wird ein wenig Semantik deutlich: Man beschreibt mit den Klassen die Funktion, die dieses HTML-Element erfüllt, und kann das im CSS mit den gewünschten Styling-Regeln hübsch machen. Ist mehr Denkarbeit, letztlich aber sinnvoll, denn man bleibt im CSS flexibel und kann statt 35 Pixel auch später mal auf 45 Pixel hochgehen, wenn es besser aussieht. Und im HTML steht dann diese blöde 35er-Klasse nicht fälschlicherweise herum!

In der Horizontalen sieht’s ähnlich aus. Statt:

<div class="timing">17.11.2011&nbsp;&nbsp;–&nbsp;&nbsp;19.11.2011</div>

schreiben wir im HTML lieber:

<div class="timing"><span class="from">17.11.2011</span>–<span class="to">19.11.2011</span></div>

Klar, das ist länger. Aber ich habe zwei wunderbare Haken, an denen ich flexibel handhabbare CSS-Regeln festmachen kann, die über padding-right: 20px; oder padding-left: 16px ganz exakt den Abstand der beiden Datumsangaben definieren können.

Also: Scheut nicht die Arbeit! Haltet das HTML sauber und denkt euch ordentliche, bedeutungsschwangere HTML-Klassennamen aus, dann klappt’s auch bei der Code-Übergabe zu einem anderen Frontend-Entwickler.

”