Erste Schritte als CSS Ninja

Wie lernt man am besten CSS? Eine schwierige Frage. Wenn man sich (wie ich) bereits seit ungefähr einem Jahrzehnt damit beschäftigt, fällt einem so leicht keine gute Antwort ein. In diesem Artikel versuche ich Kernpunkte herauszuarbeiten, wie man den Einstieg schneller schafft.

Anzumerken ist allerdings, dass dies eine sehr pragmatische Einführung ist, die auf meinen Erfahrungen als Freelancer basiert. Themen wie CSS3, Accessability, Alternativ-CSS oder Performance sind ausgeklammert, weil sie in meiner Praxis keine Rolle spielen und daher für einen Einsteiger erstmal nicht wichtig sind.

Wissen

Eine Ansatzpunkt ist der Lesestoff. Die eindeutig beste Referenz in Sachen HTML und CSS ist SelfHTML. Ein sehr gutes Onlinemagazin ist A List Apart und auch Smashing Magazine ist für den ein oder anderen Tip zu gebrauchen. Eine Suchmaschine wie Google ist natürlich unerlässlich für die schnelle Hilfe und natürlich das W3, wo die Standards definiert sind.

Personen die man kennen sollte bzw. deren Aussagen man (meistens) vertrauen kann sind Eric Mayer (CSS Guru) und Jakob Nielsen (Usability Guru).

Umfangreiches Wissen lässt sich letztendlich nur mit viel Lesen und Ausprobieren erreichen. Da gibt es keine Abkürzungen. Es macht wenig Sinn Binsenweisheiten wie das Vermeiden von padding zum Positionieren von Elementen (Inkonsistenzen mit dem IE sind dadurch vorprogrammiert) als Regeln aufzustellen, da diese praktisch nie einzuhalten sind. Grundsätzlich sollte man sich natürlich mit möglichst vielen CSS Techniken auskennen, um zu wissen, was möglich ist. Eine Frage die man sich (derzeit leider noch) zu jeder Technik stellen muss ist: Geht das auch im Internet Explorer 6 und wie?

Effizienz

Wie wird man nun effizient als Webdesigner ist die nächste Große Frage. CSS und HTML sind keine Sprachen, die Abstraktionsmöglichkeiten eingebaut haben. Trotzdem lassen sich Komponenten entwickeln, wie man an der steigenden Zahl von CSS Frameworks sieht. In Deutschland beliebt ist beispielsweise YAML, welches eine vorgefertige HTML Grundstruktur und detaillierte Anweisungen zur Anpassung liefert. Von dieser Grundstruktur abgesehen, bietet YAML allerdings nicht viele wiederverwendbare Komponenten.

Ein immer wiederkehrendes Designelement ist beispielsweise das Drop-Down-Menu. Ob die Usability einer Seite dadurch steigt oder sinkt ist zwar zu bezweifeln, aber nicht jedem Kunden lässt sich diese Lösung ausreden. Gerade der Internet Explorer macht es einem nicht leicht eine Browser-übergreifende Lösung zu entwickeln, so dass man gerne auf ein vorgefertigtes Modul zurückgreift. Ich persönlich finde ADxMenu am besten und mit ein paar eigenen Anpassungen lässt sich daraus eine relativ abgeschlossene Komponente bauen.

Effizienz steigert man kaum dadurch, dass man weniger Code schreiben muss. Die meiste Zeit bei der CSS Entwicklung wird für das (wiederholte) Testen und Anpassen in den verschiedensten Browsern (99% IE) gebraucht. Diese Zeit zu minimieren bringt den höchsten Effizienzgewinn. Da jeder Browser leicht andere Voreinstellungen bei Abständen und Schriftgrößen hat, lohnt es sich beispielsweise erst einmal einen CSS Reset durchzuführen.

Struktur

Ein Problem das man insbesondere bei Websites beobachtet, deren Design schon oft angepasst wurde, ist eine unüberschaubare Menge an CSS Anweisungen. Das Design ließe sich mit einem Bruchteil an Code implementieren, aber unnötig gewordene Anweisungen können nicht als solche erkannt werden und bleiben deswegen als toter Code erhalten. Mangelhaft qualifizierte Webdesigner bauen oft Spezialcode statt wiederverwendbare Anweisungsklassen, was zu weiterer Codeduplikation führt.

Eine Möglichkeit dem entgegenzuwirken ist das Strukturieren des CSS Codes. So teile ich persönliche meine CSS Dateien in Bereiche ein.

1. "Farben und Bilder" an erster Stelle, die diese am häufigsten angepasst werden. Was mit Farbschema und Hintergrundbildern zu tun gehört in diesen Bereich. Das sind im allgemeinen color, background und border CSS Anweisungen.
2. "Text" beinhaltet Anweisungen zu Schriftgrößen, Abständen und Formatierungen. For allem font-size, line-height, font-weight wird hier festgelegt, aber auch text-align und text-decoration.
3. "Position" ist meist der größte Bereich, da Abständseinweisungen hier hineingehören. Natürlich sind width, height, margin und padding hier am verbreitetsten, aber auch float, position, clear, display und weitere Anweisungen sind zu finden.
4. "Schriftarten" sind getrennt vom Text, da Schriftart und Formatierung unterschiedliche Stilmittel sind. Primär font-family aber auch font-style werden in diesem Bereich definiert.
5. "Sonstiges" wie spezielle Anpassungen, wie sie beispielsweise für CMS's wie Typo3 oder eingebaute Widgets wie Disqus notwendig sind, erhalten einen gesonderten Bereich.

Zusätzlich gilt die Regel

Keine Anweisung doppelt

Das mag sich einfach anhören, ist aber nicht leicht durchzuhalten. So darf zum Beispiel ein color: #94e72f; nur einmal vorkommen. Man hat die Wahl zwischen

#content a { color: #94e72f; font-weight: bold; }
#header h1 { color: #94e72f; }

und

#content a,
#header h1 { color: #94e72f; }
#content a { font-weight: bold; }

Im zweiten Beispiel die Regel "Keine Anweisung doppelt" eingehalten, allerdings ist der Selektor #content a nun doppelt vorhanden. Meiner Meinung nach ist die zweite Variante wartbarer, sprich bei späteren Anpassungen schleichen sich seltener Fehler ein, die zeitaufwendig getestet, gefunden und beseitigt werden müssen.

Zum Internet Explorer Debugging empfehle ich jeweils eine extra CSS Datei für IE6, IE7 und auch IE8 falls notwendig, die dann per Conditional Comments eingebunden werden. CSS Hacks sollten generell vermieden werden. Nur eine Datei für alle IEs gemeinsam zu verwenden, verursacht mehr Probleme, als es löst.

Werkzeuge

Welchen Editor man benutzt hängt sehr stark von den eigenen Gewohnheiten ab und ich möchte hier niemanden zu irgendetwas überreden. Persönliche nutze ich vim. Als Hauptentwicklungsbrowser ist Firefox aufgrund des Firebug-Plugins meiner Meinung nach noch immer die beste Wahl. Zwar besitzen die anderen (großen) Browser ähnliche Funktionalitäten, aber vor allem beim pixel-genauen Positionieren kann bisher keiner mithalten.

Da jeder Entwickler eigene Vorlieben im Bezug auf Betriebsystem und Arbeitsweise hat, sind Virtualisierungswerkzeuge sehr nützlich. So bietet beispielsweise Microsoft selbst eine kleine Sammlung von Images an, um damit Websites auf Windows XP und Vista und in IE6, IE7 und IE8 zu testen. Diese sind zwar im VirtualPC-Format, können aber recht einfach konvertiert werden z.B. auf VirtualBox.

Fazit

Webdesign ist in Web 2.0 Zeiten so beliebt, dass es eine Unmenge an Angeboten gibt, die allerdings meist mehr versprechen als bieten. Framework jeglicher Art versprechen "Einfachheit" und kurze Entwicklungszeiten und optimieren dann doch nur Trivialfälle, statt schwierige Probleme anzugehen. Das Abwägen von Vor- und Nachteilen von Angeboten ist deswegen schwierig, aber gleichzeitig eine der Hauptaufgabe eines Webdesigners, der auf der Höhe der Zeit bleiben will.

Viel Erfolg und nicht vergessen die Säge zu schärfen!