datenbrei.de

CSS Styling ohne Klassen mit HTML5

Während ich mich mit mit dem CSS Layout der Artikel von Blogless beschäftigte fragte ich mich, ob es möglich ist mit den neuen semantischen Möglichkeiten von HTML5 das CSS so zu schreiben, dass es ähnlich wie der Grundaufbau eines HTML-Gerüstes unmittelbar verständlich und gut leserlich ist. Ich wollte also die Ästhetik von Artikeln auf die eher technischen Aspekte wie HTML und CSS ausdehnen.

Der Grund war, dass ich mir einige sehr gut aussehende und minimalistische Wordpress Themes angesehen hatte, die sich vielleicht für eine reine Artikel-Ansicht gut geeignet hätten,  und nicht ohne Weiteres in der Lage war zu verstehen, wie sich das Styling auswirkt. Mal unabhängig davon, dass ich in den betrachteten Themes eine Unzahl Validierungsfehler im HTML fand, war es auch so, dass das CSS teilweise sehr wild aussah, über Präprozessoren wie LESS generiert war und natürlich auch, wie oft in Wordpress, das gleiche CSS für die Ansicht der Website, der einzelnen Artikel, der Archive usw. genutzt wurde. Dass dies die Lesbarkeit und somit auch das Verständnis dadurch nicht gerade erleichtert wird, ist ja klar.

HTML5 semantisch?

Was bedeutet eigentlich "semantisch" im Sinne von HTML? Es bedeutet grob gesagt, dass man HTML-Tags benutzen kann, die einem sagen, um was es sich dabei handelt. Beispielsweise zeigen die <article></article> Tags an, dass es sich bei deren Inhalt um einen Artikel handelt, bei <aside>, dass es nebensächliche weitere Informationen sind und bei <header>, <footer> oder <nav> um den Header der Seite oder des Artikels, den Footer oder um ein Navigationselement handelt, um zum Beispiel auf andere Seiten zu kommen.

Früher musste man dies alles mit Klassen regeln, da es nur die Elemente <div> und <span> gab - <div> für die Strukturierung von ganzen Blöcken innerhalb der Anzeige und <span> für die Strukturierung innerhalb von Zeilen von Text. Mit

<span class="author">Martin</span>

hätte man zum Beispiel später dem Autor eine besondere Formatierung mit CSS zukommen lassen können. Heute kann man dies mit HTML5-Mitteln machen, ganz ohne Klassen:

<address>Martin</address>

CSS ohne Klassen

Viele Webautoren nutzen Klassen auch, um zum Beispiel einen Link <a> im Footer anders zu stylen, als einen Link im Artikeltext. Was viele nicht wissen ist, dass man einen Link im Artikel von einem Link im Footer im CSS auch so und ganz ohne Klassen unterscheiden kann:

article a {...}
footer a {...}

So ist im CSS-Stylesheet auch gleich klar, um was es sich handelt und man muss nicht raten, wie oder für welche Zwecke Klassen gebraucht werden. Hier einmal ein Beispiel eines vereinfachten HTML-Gerüstes für einen Artikel:

<!DOCTYPE html>
<html>
  <head>
    <title>Beispiel</title>
    <meta charset=UTF-8>
  </head>
  <body>
    <main>
      <article>
        <header>
          <h1>Beispiel</h1>
          <address>Martin Döring</address> - <time>Sunday, the 19th of July 2015</time>
        </header>
        <p>Dies ist der <i>erste</i> Absatz von Text</p> 
        <p>Dies ist der <b>zweite</b> Absatz von Text</p>
        <p>Dies ist der dritte Absatz von Text</p>
      </article>
    </main>
  <hr>
  <aside>Nebensächliche weiterführende Information</aside>
  <hr>
  <footer>Meine tolle Beispielseite</footer>
  </body>
</html>

Zu bemerken ist hier, dass der Header hier innerhalb des Artikels steht, was vollkommen ok ist, der Footer allerdings nicht zum Artikel gehört, also quasi außerhalb steht und so eher zur Website gehört.

Will man das oben stehende Gerüst nun mit CSS ein Layout verleihen, so könnte man zum Beispiel folgendes Stylesheet verwenden:

html { background-color:#FFF; font-family:sans-serif; height:100%; }
body { max-width:200mm; margin:0px auto; padding:30px 10px; min-height:100%; }
body hr { color:#F80; background-color:#F80; border:#F80; height:1px; }

article { line-height:160%; }
article p { margin-bottom:0.5em; }
article a { color:#F80; text-decoration:none; }
article b { font-weight:bold; }
article i { font-style:italic; }

article header { margin: 0 auto; color:#BBB; font-size:small; margin-bottom:1.5em;}
article header h1 { margin: 1em 0px; font-weight:bold; font-size:x-large;  }
article header a { color:#BBB; text-decoration:none; }
article header address { display:inline; }
article header time { display:inline; }

aside { padding:30px 10px; line-height:140%; }
aside a {color:#F80; text-decoration:none; }

footer { text-align:center; color:#BBB; font-size:small; font-weight:bold; }
footer a { color:#BBB; text-decoration:none; }

Fazit

Wie man sieht, ist jeweils ganz klar zu erkennen, welches Tag in welchem Kontext vorkommt, ohne auch nur einmal eine Klasse verwendet zu haben. Das ganze ist gut lesbar und eindeutig zu verstehen.