CSS-Basics sind nicht nur für Anfänger

Es ist sicher vielen Webdesignern so wie mir ergangen. Nach einigen Jahren dachte ich, ich könnte CSS. Ich war zwar realistisch genug um zu wissen, dass man vieles besser machen kann, aber in dem Moment als ich das erste Mal für eine große Firma Code geschrieben habe, wurde ich eines Besseren belehrt. Ich bin in eine andere Welt eingetreten. Hier ist es nicht mehr eine mehr oder weniger einfache One-Man-Show, wo am Ende die Site für sich funktionieren muss. Plötzlich stehen viel mehr Faktoren im Rampenlicht und man erinnert sich an einige Spielregeln, die man gelernt hat, aber zum Teil aus Überheblichkeit doch wieder bleiben ließ.

Was sind jetzt diese Grundprinzipien?

Trennung von HTML und CSS. Die strikte Trennung von Gerüst und Formatierung sollte heutzutage jedem bewusst und ins Blut übergegangen sein. Deswegen will ich hier auch gar nicht näher darauf eingehen.

Aber es gibt beim CSS zahlreiche Grundregeln, die leider oft nicht eingehalten werden.
Da wäre einmal die Form in der Code geschrieben wird. Eine saubere Codierung ist das Um und Auf unseres „Handwerks“. Es geht nicht nur darum, dass sich andere im Code zurechtfinden sollen. Auch selbst verliert man sonst leicht den Überblick – vor allem wenn es einmal längere Projekte werden (ich spreche hier aus leidvoller Erfahrung).
Ja, jetzt denkt jeder: „Ach was, ich weiß doch was ich schreibe. Das ist alles nur Gerede“. Für den Moment mag das vielleicht gelten, nur ein oder zwei Jahre später hat man leider keine Ahnung mehr was man damals im Infight mit dem Code gemeint hat.
Genau aus diesem Grund schreiben alle – und nun auch ich – gebetsmühlenartig:

Den Code immer so schreiben, dass sich auch ein Fremder darin zurechtfindet.

Notierung des Codes

Es gibt zahlreiche Varianten Code zu gliedern. Für welche Variante man sich entscheidet ist Geschmackssache. Die Methode sollte aber einheitlich sein.

Eine der Varianten, gut lesbaren Code zu notieren, ist folgende:

• jeder Selektor hat eine eigene Zeile
• jede Eigenschaft gefolgt vom Wert hat eine eigene Zeile
• nach dem trennenden Doppelpunkt folgt ein Leerzeichen
• auch nach dem letzten Wert folgt ein Strichpunkt (vermeidet bei einer Änderung eine vorprogrammierte Fehlerquelle)
• die schließende geschwungene Klammer } hat eine eigene Zeile und ist wieder ausgerückt

Das Schema einer Klasse oder ID bestehend aus
Selektor { Eigenschaft: Wert; } sieht dann folgendermaßen aus:

Das Einrücken strukturiert den Code. Man kann sich zwischen Tabs und Leerzeichen entscheiden. Nur mischen sollte man sie nicht. Ich verwende beispielsweise Tabs mit der Größe von vier Leerzeichen. Das macht den Code optisch nicht nur schneller erfassbar, sondern hat auch den Vorteil, dass man weniger Anschläge benötigt. Viele moderne Editoren bieten bereits solche Einstellungsmöglichkeiten. Auch wird bei einigen, wie zum Beispiel bei Sublime Text, die schließende Klammer bereits richtig gesetzt. Das erspart Arbeit und minimiert Fehlerquellen.

Benennung von Klassen und IDs

Jeder, der Code schreibt, sollte Klassen und IDs (Selektoren) mit logischen und sprechenden Namen versehen. Dann kann man sich bereits anhand der Namen vorstellen, worum es geht.

Abgesehen von der Benennung sollten IDs auf jeden Fall sparsam aber konsequent eingesetzt werden, da sie pro Seite einzigartig sein müssen. Es könnte ja vorkommen, dass die Seite verändert wird. Da ist es doch besser ein Klasse zu vergeben, die man öfter verwenden kann. (mehr zur Verwendung von Ids und der Diskussion darüber bei den Webkrauts)

Halte dein CSS kurz

Häufige Tipps beinhalten auch die Strukturierung des Stylesheets nach Inhalt. Das Stylesheet entsprechend zu unterteilen und zu kommentieren ist eine gängige Praxis. Daraus ergibt sich dann ein Abschnitt mit allen Grundformatierungen, den Überschriften, der Navigation, dem footer, ... So erlangt man bei einer Bearbeitung und beim Debugging schnell den Überblick. Auch sollte man beherzigen, nur wirklich notwendigen Code zu schreiben. Das hält das Stylesheet kurz. Und knapper Code hat meist eine bessere Performance.