Viele werden es kennen: Man bekommt eine Seite vorgesetzt und soll Layoutänderungen daran vornehmen – “Am besten nur über CSS!”, eigentlich wäre das kein Problem, nur sieht man in den seltensten Fällen durch das Wirrwarr, das der Vorgänger hinterlassen hat hindurch. Da stehen ein Paar komische Klassen hier und seltsame Selektoren da.. keine Kommentare – alles scheint irgendwie durcheinander zu sein. Manchmal blickt man aber auch nach einer Weile selbst nicht mehr durch seinen eigenen Code.

Das muss nicht sein. Geht mit gutem Beispiel voran und lernt, wie man besseren, sauberen CSS-Code verfasst, der noch dazu in allen Browsern zu einem nahezu identischen Ergebnis führt.

1. CSS Reset einbinden

CSS Reset bedeutet, dass alle Browser-Styles überschrieben werden, sodass die Darstellung bei allen Browsern bei Null anfangen kann. Auf dieser Basis lässt sich dann ein einheitliches Design beschreiben. Die Einbindung erfolgt entweder über eine gesonderte reset.css (vor eure eigentliche CSS platzieren) oder man schreibt die wenigen Zeilen in seine eigentliche CSS Datei (vor allen anderen Anweisungen).

Eine bekannte Reset-Methode ist die von Eric Meyer, einem international anerkannten CSS-Experten, der diverse Bücher veröffentlicht hat (darunter auch CSS: The Definite Guide). Folgender Code wird verwendet..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Die Reset von Eric Meyer ist nicht das Maß aller Dinge. Sie ist dazu gedacht verändert und an das jeweilige Projekt angepasst zu werden. Hinterfragt sie also kritisch und passt sie euren Vorlieben und Erfahrungen an.

Für die Minimalisten unter euch gibt es auch eine einfachere aber trotzdem recht effektive Methode. Dabei wird das Margin und Padding für alle Elemente (Universal Selector) auf Null gesetzt..

1
2
3
4

* {
	margin:0;
	padding:0;
}

2. Keine Hacks, dafür Conditional Comments verwenden

Im Laufe der Zeit haben sich “kluge” Leute Hacks für ältere Browser ausgedacht, um bestimmte W3C Standards auch auf diesen zum Laufen zu bringen. Baut man diese Hacks in sein CSS ein, kann es sein, dass damit euer Code invalide wird. Abgesehen davon, dass sie in der Community mittlerweile verpönt sind, sollte man wirklich auf Browser Hacks verzichten.

Stattdessen sollte man Conditional Comments benutzen um spezielle CSS-Dateien für die jeweiligen Problem-Browser einzubinden (meistens betrifft das nur IE6).

Conditional Comments werden über besondere Kommentare im head-Bereich (unterhalb eurer eigentlichen CSS) eingefügt. Um zum Beispiel eine CSS für alle IE-Versionen kleiner-gleich IE6 einzubinden, muss man folgenden Code ins HTML schreiben:

1
2
3

<!--[if lte IE 6]>
	<link rel="stylesheet" href="/pfad/zum/css/IE6.css" type="text/css"/>
<![endif]-->

3. Strukturieren & Kommentare nutzen

Euer Code sollte strukturiert und kommentiert sein. Um das zu erreichen versucht den Code in Bereiche zu gliedern, die auch im Front-End zu sehen sind: Basic HTML Tags, Navigation, Content, Header, Sidebar, Footer, Suche & Formulare.. usw. Benutzt einfach eine Gliederung, die für euch funktioniert und halbwegs logisch aufgebaut ist. Um die Bereiche voneinander zu trennen, kann man einfach gut sichtbare Kommentar-Blöcke verwenden.

1
2
3
4
5
6
7
8
9

/* ------------------------ */
/* ------ Content --------- */
/* ------------------------ */
#content {
	...
}
#content p {
	...
}

Es empfiehlt sich außerdem einen einleitenden Kommentarblock zu schreiben, in den man Information rund um die CSS-Datei schreibt. Neben dem Autor (also dein Name) kann man Versionsnummer, letztes Bearbeitungsdatum und Kurzbeschreibung (auf Englisch) auch häufig genutzte Farbcodes oder ähnliches dazuschreiben. Diese Herangehensweise ist unter WordPress Pflicht, da das Backend wichtige Informationen über das Theme aus der CSS ausliest.

4. Schlankes, effektives CSS schreiben

Um schlankes und gleichzeitig effektives CSS zu schreiben, sollte man sich einige Punkte verinnerlichen.

1. Aussagekräftige IDs und Klassennamen wählen

   Bezeichner sollten auch ihren Namen gerecht werden: #sidebar ist besser als #divleft.

2. Selektoren gruppieren

   Sollten unterschiedliche Tags, IDs oder Klassen die gleichen CSS Eigenschaften bekommen, gruppiert man die jeweiligen Selektoren.

   1 2 3 4 5

   h4, #header, span.block { ... }

3. Kurze Selektoren

   Wenn möglich sollten Selektoren so kurz wie möglich sein.

   1	#sidebar .widget h2.widgettitle

   ..ist viel zu lang, besser ist es so..

   1	#sidebar h2

   ..obwohl sie beide das gleiche ansprechen.

4. Properties einrücken und alphabetisch sortieren

   Um die Lesbarkeit des Codes zu erhöhen, ist es ratsam jede Property auf eine neue Zeile zu schreiben, sie einzurücken und alphabetisch zu sortieren. Das macht erstmal ein wenig Arbeit aber wenn man von Anfang an so vorgeht, ist man genauso schnell und es zahlt sich am Ende aus.

   1 2 3 4

   #sidebar { z-index:20; background-color:#fff; position:relative; line-height:22px; font-site:12px; }

   ..das ist wesentlich schlechter zu lesen als das hier..

   1 2 3 4 5 6 7

   #sidebar { background-color:#fff; font-site:12px; line-height:22px; position:relative; z-index:20; }

5. Shortcodes verwenden

   Um sich unnötige Arbeit zu ersparen sollte man immer die Kurzformen von Properties und Farbcodes verwenden.

   1 2 3 4 5 6 7 8 9 10

   #sidebar { background-color:#ffaa99; background-image:url(images/bg_sidebar.jpg); background-repeat:no-repeat; background-position:top left; margin-top:0; margin-right:10px; margin-bottom:15px; margin-left:0; }

   ..ist extrem umständlich, viel einfacher und kürzer gehts so..

   1 2 3 4

   #sidebar { background:#fa9 url(images/bg_sidebar.jpg) no-repeat top left; margin:0 10px 15px 0; }

6. !important vermeiden

   Die !important-Anweisung hat natürlich einen Sinn aber man sollte sie dennoch nur in Notfällen benutzen, da man sonst erhebliche Probleme mit dem Cascading bekommen kann.

Habt ihr noch weitere Vorschläge? Wie formatiert Ihr euren Code? Teilt eure Meinung anderen einfach per Kommentar mit!