Ich versuche herauszufinden, wie ich mein CSS so weit wie möglich von meinem HTML entkoppeln kann. Der Weg dorthin wäre, die grundlegenden Layout-Elemente im HTML in einer standardisierten Weise zu schreiben, so dass verschiedene CSS-Dateien genau wissen könnten, wie die Markierung, mit der sie arbeiten, aussehen wird, ohne sie gesehen zu haben.
Ich habe mich gefragt, ob es irgendwo eine Reihe von Standards dafür gibt, wie man seine Layout-Elemente benennen sollte und in welcher Reihenfolge man sie anordnen sollte. Z.B. wäre ein sinnvoller Weg, meine Seite wie folgt zu benennen (beachten Sie, dass ich HTML5-Elemente verwende und folgende die Theorie, dass man niemals IDs für CSS-Regeln verwenden sollte ):
<body>
<div class="container"> <!-- central "squeeze" for the content -->
<header>
<img class="logo" />
<nav class="primary"></nav> <!-- main navigation -->
</header>
<aside class="pre"></aside> <!-- left column -->
<article class="main"></article> <!-- central main content -->
<aside class="post"></aside> <!-- right column -->
</div>
</body>
Viele Seiten verwenden ein ähnliches Grundlayout wie diese. Aber wie Sie sehen können, wird der Name der "Container"- oder "Primär"-Klasse stark variieren, ebenso wie die Verwendung von <aside>
für Spalten. Außerdem gibt es wahrscheinlich Abweichungen in der Reihenfolge, z. B. würden manche Leute die <nav>
Element nach dem <header>
und nicht innerhalb davon, oder die Spaltenelemente innerhalb der <article>
Element.
Kennt jemand eine Arbeit, die getan wurde, um die Anordnung und Benennung dieser häufig verwendeten Layout-Elemente zu standardisieren? Wie ein Mikroformat oder so etwas?