Eine Seite über die grundlegenden CSS-Prinzipien, die jeder moderne Anfänger-, Amateur und Profi-Webdesigner einhalten sollte.
- Regel Nummer 01: Inhalt vor Design
- Überlege immer was du überhaupt auf deiner Homepage haben willst und erst dann wie es gestaltet wird. Wenn du den Grossteil vom Text, Bilder und Links beisammen hast, darfst du mit dem Gestalten anfangen.
- Regel Nummer 02: Genug Klassen und IDs erstellen
- Mache immer genug Klassen und IDs zu den verschiedenen Bereichen deiner Homepage. Auch wenn du fürs Erste einen Bereich nicht von anderen gestalterisch unterscheiden willst. Später wirst du froh darum sein. Es ist keine Sünde, wenn du einige IDs und Klassen per CSS nie formatierst.
- Regel Nummer 03: Selektoren, Klassen und IDs für das Was, CSS für das Wie
- Mit Tags, Klassen und IDs beschreibst du was etwas ist und mit den zugehörigen CSS-Eigenschaften beschreibst du wie es aussehen soll. Vergib aussagekräftige Namen. Oft verwendete IDs und Klassen bekommen kurze Namen, selten verwendete dürfen längere Namen haben (auch mit Unterstrich).
- Regel Nummer 04: Nutze externe und interne Stylesheets
- Ein internes CSS ist für Eigenschaften, welche nur auf der betreffenden Seite vorkommen. Ein externes Stylesheet beschreibt globale Eigenschaften, welche überall auf der Homepage gelten.
- Regel Nummer 05: CSS geordnet halten
- Body und die wichtigsten DIVs kommen zuerst, dann der Rest. Allgemeine CSS-Regeln vor den spezifischeren. Die CSS-Reihenfolge möglichst so halten, wie sie im Browser vorkommen.
- Regel Nummer 06: Testen nicht vergessen
- Sollte klar sein, wird aber gerne vergessen: Teste deine Seite auf allen gängigen Browsern und löse die Probleme, falls welche auftauchen. Auch niedrigere Auflösungen und eine veränderte Schriftgrösse müssen getestet werden! Ein richtiger Webdesigner sagt nie, es funktioniere ja auf seinem Computer und was denn die Aufregung soll... Getestet wird übrigens immer auf dem Server und nie auf dem lokalen Speicher!
- Regel Nummer 07: Keine Hacks verwenden
- Verwende sie und du wirst sie früher oder später wieder entfernen, weil sich die Browsern immer ändern. Zweitens bist du so nicht motivierst halb funktionierende CSS-Eigenschaften zu benutzen. Wenn der Browser-Fehler unvermeidbar ist (wie z.B. dem IE Box-Modell Bug), gestalte die Seite so, dass der Bug nicht negativ zum Tragen kommt. Siehe auch Regel 15. Hacks verunstalten deinen Code sichtbar! Siehe dazu auch Regel Nummer 15.
- Regel Nummer 08: Neue CSS-Eigenschaften als Option
- Neue CSS-Eigenschaften, welche nur von den neusten Browser-Generationen unterstützen dürfen durchaus verwendet werden. Aber nur solange deine Seite auch ohne diese Eigenschaft bei den älteren Browsern anständig aussieht, bzw. nicht gleich die ganze Seite zerschossen wird. Schliesslich glauben wir an den Fortschritt der Menschheit ;-) und wollen uns nicht an die älteste Technik anpassen.
- Regel Nummer 09: Keep it simple stupid
- Mache dein XHTML und CSS nicht zu fett. Verschachtele nicht alles unnötig und überlege immer, ob es nicht auch einfacher geht, wenn du etwas Neues einbaust.
- Regel Nummer 10: Müll raus
- Sachen, die du zum Testen auf der Homepage eingebaut hast oder irgendwelche Übergangslösungen, die du nicht verwendest gehören sofort gelöscht! Lasse auch nicht alte Sachen stehen, die du vielleicht später wieder zurückhaben willst. Du solltest immer wissen, wie du auf den ursprünglichen Zustand der Seite zurück kommen kannst. Wenn du unsicher bist hast du irgendwo eine Wissenslücke, welche du besser stopfst anstatt alten Code auf dem Server herumliegen zu lassen.
- Regel Nummer 11: Keine halbfertigen Sachen
- Fange nicht 15 Minuten bevor du den Computer herunterfahren musst etwas Neues an. Es wird nicht funktionieren und du hast wieder Müll auf dem Computer und Frust bei dir! Wenn du fit bist und genug Zeit hast, kannst du dich an die Sache ranwagen.
- Regel Nummer 12: Offen für Neues sein
- Gestalte deine Seite immer so, dass du theoretisch (und logischerweise dann auch praktisch) ohne Probleme und Bastlerei Neues einbauen kannst. Dies ist eine der Stärken der modernen CSS-formatierten Webseite. Mache sie nicht zunichte.
- Regel Nummer 13: Sparsam sein mit allgemeinen CSS-Eigenschaften
- Wenn du deine neue CSS-News-Liste so richtig toll findest und alle UL-Tags global formatierst hast wird dir deine Freude schnell wieder vergehen wenn du eine andere Liste einbauen willst, die keine News-Liste ist und dementsprechend anders aussehen soll. Benutze hier immer IDs und Klassen.
- Regel Nummer 14: Validatoren benutzen
- Die offiziellen Überprüfungs-Tools helfen dir bei Fehlern und für das Halten von sauberem Code.
- Regel Nummer 15: Technik gestaltet mit
- Überlege nicht einfach nur wie du deine Seite gestalten willst um dann fieberhaft nach der passenden CSS-Eigenschaft zu suchen, welche dann z. T. nicht mal wirklich funktioniert. Mache immer gestalterische Lösungen, welche mit einer einfachen Technik zu bewerkstelligen sind. Deine Seite sieht auch noch toll aus, wenn du deine Idee ein bischen umgestaltest.
- Regel Nummer 16: Reserve halten
- Mache dein Design nicht pixelgenau, sondern halte immer genug Abstände zu deinem Elementen als Reserve, wenn du später etwas Neues einbauen willst. Es reagieren sowieso nicht alle Browser haargenau gleich!
- Regel Nummer 17: Zeit ist wertvoll
- Verweile nicht ewig an der gleichen CSS-Regel und am gleichen Code-Schnipsel. Verwirf es, wenn es eher unwichtig ist oder wage dich später nochmal daran. Wenn du für deine Page etwas verdienen willst gilt natürlich auch "time is money". Du willst wahrscheinlich eine möglichst gute Homepage zu geringen Kosten für deine Kunden produzieren und möglichst wenig Aufwand zu gegebener Qualität für dich.
- Regel Nummer 18: Einfach Schreiben möglich machen
- Sachen, die du oft neu einbaust (z. B. News) sollte jeder Webdesigner einfach hinschreiben können ohne lange Klassen-Zuweisungen. Gestalte dein CSS so, dass dies möglich ist. Mache beispielsweise ein DIV rundherum und gebe diesem eine bestimmte Klasse oder ID.
- Regel Nummer 19: Wissen ist Macht
- Informiere dich gut über jede CSS-Regel in allen Einzelheiten (Wirkung, Initial-Wert, Browser-Unterstützung). Nimm dir die Zeit, du wirst sie später wieder holen, wenn du dann dafür nicht am CSS rumbasteln musst weil du gar nicht recht weisst, was es mit deiner Seite überhaupt macht.
- Regel Nummer 20: Kommentare raus
- Bei einigen mag diese Regel umstritten sein. Beachte aber: Wenn ich meinen Code sauber und gut mit sinnvollen Klassen und IDs bestücke brauche ich keinen Kommentar, welcher mit ein Ende, Anfang eines Bereiches oder was auch immer beschreibt. Ein guter Webdesigner kennt seinen Code und ein eventuell nachfolgender Webdesigner wird sich zurecht finden, wenn man den Code sauber hält!
