Besseres CSS schreiben

Sie bauen an der Site des Jahrhunderts. Zu Anfang entstehen CSS-Regeln in Reihenfolge, wie sie ge­braucht werden: eine gegen Browser­versatz, eine für schöne Body-Hinter­grund­farbe, Absatz­be­stimmun­gen usw. Aus 20 Zeilen CSS werden 100, später 200 und auch 1000 Zeilen sind möglich. Da wird’s unübersichtlich und clevere Regeln sollten helfen!

1. Zuerst das Reset

Da ein Reset-Stylesheet auf die ganze Site Einfluss hat, muss es an erster Stelle stehen, sonst würde es nicht durch Ausnahmen überschreibbar sein. Die folgende Regel überschreibt immer die erste. Ein Beispiel:

p {color:#333}
p {color:#666}

Alle Absätze der Site sind im helleren Farbwert #666. Die erste Deklaration wird überschrieben.

2. Ordnung der Dinge

Eine strenge Ordnung aller CSS-Regeln ist fast Nebenssache. Einen Geschwindig­keits­nachteil habe ich noch nicht bemerkt, egal, wie chaotisch die Zeilen angeordnet waren. Allerdings sinkt die Entwick­lungs­ge­schwindigkeit enorm! Halten Sie einfache Regeln ein, mit denen Sie und Ihr Team jedes Stylesheet leicht verstehen.

/*-- Reset-Stylesheet first --*/
body{margin:0;padding:0;border:0}
p{color:#777}
.small{font-size:0.75em}
.red{color:#CC0000}

Erst kommt das Reset, dann allgemeine Tags (body, p), dann die Classes (small, red). Nun kommt mehr:

/*-- Reset-Stylesheet first --*/

/*-- tags ----*/

body {margin:0; padding:0; border:0;}
p {color: #777}

/*-- classes ----*/

.small {font-size: 0.75em}
.red {color: #CC0000}
.wrapper {margin: 0 auto; width: 920px;}

/*-- jetzt divs ----*/

#header {height: 100px}
#nav {height: 25px}

Ergänzt wurden ein paar strukturelle Regeln, die das Seitenraster aufbauen. Die Wrapperklasse (#12) kann mehrfach eingesetzt werden, ist deshalb als Klasse gesetzt und soll hier die gesamte Site zen­trie­ren. Dann folgen bestimmende Seitenbereiche: Header (#16), Navigation (#17) usw. in Reihenfolge. So kann man im Stylesheet den Aufbau einer Site intuitiv nachvollziehen. Bemerkt? Ein paar Leerzeichen vor den Klammern und zwischen den Werten der Deklarationen verbessern die Lesbarkeit. Für einen Browser ist es egal, für den Coder nicht.

4. Einrückungsstil

Wie die geschweiften Klammern gesetzt (engl. indent style) werden, ist weiterhin entscheidend für die Lesbarkeit des CSS-Codes. Manche Firmen nutzen einheitliche Regelungen. Ansonsten ist es dem Deve­loper überlassen, wie er klammert. Folgende Regeln (es gibt viele) haben sich bewährt:

Deklaration, Klammer, neue Zeilen mit Einrückung; übersichtlich und schnell.

#content {
  width: 650px;
  }
#content h2 {
  color: #CC0000;
  font-size: 22px;
  font-weight: bold;
  }
#content p {
  font-size: 12px;
  line-height: 22px
  padding: 10px;
  }

Deklaration, neue Zeile, Klammer usw.; sehr übersichtlich.

#content
  {
  width: 650px;
  }
#content h2
  {
  color: #CC0000;
  font-size: 22px;
  font-weight: bold;
  }
#content p
  {
  font-size: 12px;
  line-height: 22px
  padding: 10px;
  }

Die Breite der Einrückung lässt sich per Tabulatorschritt oder Leerzeichen aufbauen. Ich bevorzuge Tabulatorschritte, die auf 2 Leerzeichen eingestellt sind: einmal Klick statt zweimal. Manche Developer wählen 4 bis zu 8 Leerzeichen abhängig von der verwendeten Programmier­sprache. Das ist bei CSS unerheblich, da es auf die Lesbarkeit ankommt. Man kann sich überlegen, eine Mischschreibweise zu bilden. 1 Deklaration = 1 Zeile, viele Deklarationen = viele Zeilen:

#content
  {width: 650px;}
#content h2
  {color: #CC0000;}
#content p
  {
  font-size: 12px;
  line-height: 22px
  padding: 10px;
  }

5. Kommentare sind Freunde

Kommentare sind nicht nur gut für Sie, sondern auch für alle nachfolgenden Developer, die sich ein Beispiel an Ihrem genial geschriebenen Code nehmen wollen, oder, hmm, ihn nur verbessern … Auf jeden Fall dient es enorm der Übersichtlichkeit, an richtiger Stelle eine Nachricht zu hinterlassen:

/*-----------------------------
  version 110425-01
  Special Chief-Dev. Horst
-----------------------------*/

/***** content goes here *****/

#content
  {
  width: 650px;
  }
#content h2
  {
  color: #CC0000;
  font-size: 22px;
  font-weight: bold;
  }

/*-- sidebar, dont change --*/

#sidebar p
  {
  font-size: 12px;
  line-height: 22px
  padding: 10px;
  }

Ist übrigens unwichtig, ob Sie — oder ** oder ## zwischen den Kommentarzeichen verwenden. Das bleibt Ihr Stil. Wichtig ist, dass Sie einheitlich bleiben. Unregel­mäßig­keiten können so als Fehler auf einem Blick erkannt werden.

6. Nutzen Sie Shorthand Rules

Machen Sie sich weniger Arbeit und bleiben schreibfaul (und werden schneller), wie es gute Coder nun mal sind! Fangen Sie klein mit einer leichten Shorthand Rule an und steigern sich, das macht Spaß:

#sidebar p
  {
  margin-top: 0px;
  margin-right: 10px;
  margin-bottom: 30px;
  margin-left: 10px;
  }

ist dasselbe wie:

#sidebar p
  { margin: 0px 10px 30px 10px }

7. Schön ist nicht schnell

Wenn Sie alles fertig haben, dann können Sie sich einen besonderen Triumpf gönnen. Machen Sie Ihr Stylesheet schneller, indem Sie es »glattbügeln«. Schicken Sie es in einen CSS-Compressor. Heraus kommt ein von Zeilenumbrüchen, Kommentaren und Leer­räumen »befreites« Stylesheet, was mindestens 30 Prozent weniger Dateigröße auf die Waage bringt. So wird Ihre Site hammerschnell!
Natürlich haben Sie das leicht lesbare Original-Stylesheet auf der Platte gespeichert, sollten sich später Änderungen ergeben.


Extratipp

Wer ohne große Mühe wunderschönes CSS erzeugen möchte, der kann ProCSSor besuchen. Hier kann man nach einzustellenden Regeln sein CSS umformen. Ein Besuch wert!

Tags:

Comments are closed.


QR Code Business Card