Zum Inhalt

CSS-Checkliste

Im Nachhinein und Live-Betrieb meines neuen Layouts ist mir aufgefallen, dass ich für ein paar Elemente das Styling völlig vergessen habe. Dadurch kam ich auf die Idee, eine Liste zu mit den wohl meist gebrauchten Elementen zu schreiben.

Elemente zur Dokumentstrukturierung:
div im Zusammenspiel mit aussagekräftigen IDs wie zum Beispiel <div id="#content">
Überschriften zur Dokumentgliederung
h1, h2, h3, h4, h5, h6
Absätze
p
Links und verschiede Link-Zustände
a(:link), a:visited, a:focus, a:hover, a:active.
Diese Reihenfolge sollte man sich einprägen, beispielsweise durch den Satz Lord Vaders former handle, Anakin. Siehe auch Website in an hour von Andrew Krespanis.
hervorgehobene Textstellen
em, strong
Abkürzungen
abbr, acronym
ungeordnete Listen (Ulli)
ul, li
geordnete Listen (Olli)
ol, li
Definitionslisten
dl, dt, dd
Zitate
q, blockquote, cite
gelöschten und nachträglich eingefügten Text
del, ins
Tabellen
table, caption, thead, tfoot, tbody, tr, th, td
diverse Elemente zum Anzeigen von Code
code, pre*, var, kbd.
==* = mehr oder weniger =
weitere logische Textauszeichnungen
samp, dfn

Ich habe selber noch nicht alle Bestandteile in mein Stylesheet eingebaut, das wird sich aber sicherlich noch ändern, ein entsprechender Aufruf zur Cache-Aktualisierung wird dann auch folgen ;)

Nur, wenn sich kein passendes Element finden lässt, kann man außerdem auf das span-Element zurückgreifen, bei der Wahl eines Klassennamens ist es wichtig, die Funktion des Elements und nicht das Aussehen zu benutzen. Es kann ja immer mal passieren, dass .greenText plötzlich rot sein soll.

Im Hinblick auf XHTML 2 sei drauf hingewiesen, dass dort viele neue Elemente hinzukommen und Links nicht mehr zwingend mit dem &lt;a&gt;-Element ausgezeichnet werden müssen. Da XHTML 2 bisher nur als Entwurf fungiert, können sich selbst hier noch Änderungen ergeben.

Published inAllgemein

4 Comments

  1. Gabi Gabi

    Ich habe mir mit der Zeit einen festen Aufbau meiner css-Dateien angewöhnt:
    Zuerst kommen die HTML-Elemente, dann dokumentweit gültige classes und dann die ID’s. Und auch innerhalb dieser Gruppen halte ich eine bestimmte Reihenfolge ein.

    Ganz oben schreibe ich seit einiger Zeit noch Kommentare für die verwendeten Farbcodes mit entsprechenden Hinweisen zu den verwendeten Farben hinein.

  2. Ich persönlich fange auch mit den HTML-Elementen an, dann kommen die IDs und das Styling der Elemente in den jeweiligen Bereichen, wenn sie vom vorgegebenen abweichen.

    Außerdem sortier ich nach Reihenfolge im HTML-Quelltext, das hilft auch.

    Neuer Artikel ist in Planung ;)

  3. Ja, so ein Aufbau besitze ich auch. Wobei bei mir noch so eine Art Inhaltsverzeichnis hinzu kommt. Siehe hier

  4. span ist weitaus mehr als nur ein Tag, den man benutzt, wenn es sonst nix mehr gibt – er ist gleichwertig mit div, mit dem kleinen Unterschied, dass letzteres für Block-Elemente (also z.B. Container), während ersteres für Inline-Elemente (also z.B. Textformatierung) zuständig ist. Siehe auch hier und hier.

    Insofern ist deine Wortwahl etwas unglücklich, da span durchaus seine Berechtigung hat. Nur wissen das die meisten nicht ;-)

    Ach ja, in meinen Stylesheets regiert das pure Chaos! Ich ordne das immer nach Bereichen auf der Website an, irgendwann wirds aber unübersichtlich und redundant… :-)

Kommentare sind geschlossen.