Sieben Prinzipien für sauberes und optimales CSS

Kein Beitragsbild

Von Tony White, Übersetzung von René Schmidt; mit Genehmigung von Smashing Magazine

Einige von Ihnen erinnern sich vielleicht noch an die Zeit, in der 30KB die empfohlene Maximalgröße für eine Website war. Dieser Wert galt für eine ganze Seite, also inklusive HTML, CSS, JavaScript, Flash und Bilder. In meinen aktuellen Projekten lasse ich die 30KB-Grenze schnell hinter mir, sobald es auch nur ein klein wenig komplizierter wird. Es ist inzwischen nicht ungewöhnlich, dass durch CSS-Layouts und Javascript-Ergänzungen die CSS-Dateien alleine schon die 30KB-Schwelle überschreiten, insbesondere bei großen Websites.

Es gibt aber einige Prinzipien, CSS zu optimieren und schlank zu halten. Optimieren bedeutet nicht nur, die Dateien klein zu halten, sie müssen auch ordentlich aufgebaut und auf das Nötigste reduziert sein. Je mehr Sie über optimales CSS wissen, desto kleiner werden Ihre CSS-Dateien sein. Vielleicht kennen Sie schon die eine oder andere hier vorgestellte Technik oder möchten die Gelegenheit zur einer Auffrischung nutzen. Diese Techniken werden Ihnen helfen, optimalen CSS-Code zu schreiben und Sie zu einem vielseitigeren Web-Designer machen.

1. Schreiben Sie Kurzschrift

Wenn Sie CSS noch nicht in Kurzschrift schreiben, sind sie ein wenig spät dran. Zum Glück ist es nie zu spät, etwas zu lernen. CSS-Eigenschaften in Steno zu schreiben ist die einfachste Möglichkeit, CSS-Code klein zu halten und Entwicklungszeit zu sparen. Jetzt ist eine gute Gelegenheit, diese Technik zu lernen oder aufzufrischen.

Margin, border, padding, background, font, list-style und sogar outline sind Eigenschaften, die Kurzschrift erlauben (und es gibt noch mehr!).

CSS in Kurzschrift zu schreiben, bedeutet, mehrere ergänzende Eigenschaften zu einer Eigenschaft zusammenzuziehen. Anstatt zu schreiben

p  {
        margin-top: 10px;
	margin-right: 20px;
	margin-bottom:  30px;
	margin-left: 40px; }

können Sie in Kurzschrift dieses schreiben:

p { margin: 10px 20px 30px 40px; }

Eine unterschiedliche Anzahl Eigenschaftswerte wird unterschiedlich interpretiert, entsprechend der folgenden Darstellung:

Illustration of how shorthand declarations are interpreted depending on how many values are specified for a property
Die Illustration zeigt, dass Kurzschrift-Deklarationen in Abhängigkeit zur Anzahl der Werte einer Eigenschaft unterschiedlich interpretiert werden. Die Reihenfolge gilt auch für padding, border-width und einigen anderen Eigenschaften.

Font ist eine weitere nützliche Kurzschrift-Eigenschaft, die viel Tipparbeit und Platz sparen hilft.

Illustration of font shorthand examples
Einige Beispiele für Font-Kurzschrift. Achtung: Wenn Eigenschaften ausgelassen werden, führt das dazu, dass sie ihre ursprünglichen Werte annehmen.

Dies waren nur zwei Beispiele für CSS-Kurzschrift. Allerdings soll dies keine vollständige Auflistung sein. Auch wenn Ihnen CSS-Kurzschrift schon bekannt ist, sollten Sie sich die nun folgenden nützlichen Regeln anschauen, mit denen Sie Ihr CSS kurz und bündig halten können. Aufgrund des hohen Einsparpotenzials kann CSS-Kurzschrift einen wesentlichen Effekt auf CSS-Dateigrößen haben.

Auf den Websites CSS-Shorthand Guide (engl.) (dustindiaz.com) und Efficient CSS with shorthand properties (engl.) (456bereastreet.com) gibt es mehr Informationen zu CSS-Kurzschrift-Eigenschaften.

2. Hex hex, weg mit den Hacks

Jon Hick's blog hicksdesign.co.uk/journal makes use of conditional comments
Jon Hicks Blog hicksdesign.co.uk/journal verwendet bedingte Kommentare (engl. “conditonal comments”).

Hacks für veraltete Browser sind in Ordnung. Hacks für moderne Browser sind es nicht. Keiner von denen. Nie.

Keep CSS Simple (engl.) – Peter-Paul Koch (digitial-web.com)

Diese Worte aus Peter-Paul Kochs fast fünf Jahre altem Artikel können einen verlegen machen. So erging es mir jedenfalls und wer hat nicht schon einmal Hacks für Internet Explorer 6 oder sogar Internet Explorer 7 verwendet? So gerne wir den IE6 unter der Erde sehen wollen – der Browser ist noch lange nicht tot.

Bedingte Kommentare sind eine weit verbreitete Praxis, um Anpassungen für IE6 und IE7 bereitzustellen. Sogar Microsofts IE-Entwicklerteam empfiehlt sie. Mit bedingten Kommentaren für IE-spezifisches CSS ist es möglich, saubere und deshalb kleinere CSS-Dateien für standardkonforme Browser schreiben. Nur die Browser, die ein spezielles CSS-Hexengebräu benötigen (also die IEs), müssen die zusätzlichen CSS-Dateien herunterladen.

So verwenden Sie bedingte Kommentare, um CSS-Anweisungen nur für den IE6 bereitzustellen:

Für den IE7 tauschen Sie die “6″ gegen eine “7″.

Wenn es möglich ist, ohne Hacks das gewünschte Ziel zu erreichen, sollte man diesen Weg wählen. Je weniger Hacks Sie verwenden, desto einfacher und kleiner der Code.

3. Nutzen Sie Whitespace sparsam

Leerzeichen, Tabs oder Zeilenumbrüche vor oder nach einem Text (= engl. “Whitespace″) sind wichtig, um CSS-Code lesbar zu halten. Einzelne Whitespace-Zeichen erhöhen in der Summe die Ladezeit einer Seite. Jedes Leerzeichen, jeder Tab und jeder Zeilenumbruch, den Sie sparen können, ist ein Zeichen weniger.

Dies ist aber ein Punkt, bei dem ich nicht empfehlen würde zu knausern, nur um die Dateigröße zu verkleinern. Es ist wichtig, dass Sie (und hoffentlich auch andere) die Datei später noch lesen können. Wenn es dazu Whitespace braucht, ist es eben so. Außerdem wäre es sehr schwer für Sie, die anderen Regeln umzusetzen, wenn Ihr CSS unübersichtlich ist. Machen Sie sich bewusst, dass Whitespace wie Luft ist – nicht zu sehen, aber trotzdem mit Gewicht.

Das folgende Bild zeigt zwei extreme Formatierstile. Der erste mit viel, der zweite mit sehr wenig Whitespace. Ich bevorzuge die einzeilige Version ohne Tabs, weil ich so die Selektoren besser lesen kann und meinen breiten Bildschirm besser ausnutze. Aber das gilt nur für mich. Sie bevorzugen vielleicht eingerückte Selektoren und einzeilige Deklarationen.

Einer mit viel Whitespace im Vergleich zu einem mit sehr wenig Whitespace
Darstellung von zwei extremen CSS-Formatierungen: Einer mit viel Whitespace im Vergleich zu einem mit sehr wenig Whitespace

Whitespace effizient einzusetzen ist eine feine Sache und empfohlene Praxis für einfach zu wartenden CSS-Code. Beachten Sie aber, dass mit eingespartem Whitespace auch die Dateien kleiner sind. Sie könnten aber auch Whitespace in Ihrer Arbeitskopie belassen und in der live eingesetzten Version Whitespace entfernen lassen. So bleibt das CSS dort klein, wo es darauf ankommt.

4. Verkleinern Sie Frameworks und Resets

Nathan Smith's 960 Grid System uses a reset
Nathan Smiths 960 Grid System-CSS-Framework verwendet eine Reset-Regel.

Wenn Sie sich dazu entschlossen haben, ein fertiges oder selbstgeschriebenes CSS-Framework zu verwenden, sollten Sie sich die Zeit nehmen, die Dokumentation und jede einzelne Zeile der CSS-Datei zu untersuchen. Das Framework könnte Regeln enthalten, die Sie für Ihr Projekt nicht gebrauchen können. Diese können Sie entfernen. Weiterhin finden Sie vielleicht heraus, dass das Framework einiges eleganter macht, als Sie selbst es gemacht hätten. Das zu wissen, kann dabei helfen, nicht das Gleiche selbst nochmal in die CSS-Datei zu schreiben.

Dasselbe gilt für CSS-Resets. Das Grid-CSS von YUI enthält ein CSS-Reset und Eric Meyers Reset ist ebenfalls sehr beliebt. Resets helfen dabei, browserspezifische CSS-Eigenheiten zu neutralisieren. Wenn Sie schon etwas über die Website wissen, die Sie gerade bauen, könnten Sie vielleicht auf einige Deklarationen verzichten. <pre> und <code> werden in Muttis Kochrezepte-Blog wohl kaum Verwendung finden. Ein Design-Portfolio wird wahrscheinlich weder <sub> noch <dfn> oder <var> und so weiter verwenden. Also entfernen Sie das, was Sie nicht brauchen. Das ist nicht nur in Ordnung, sondern sogar von Eric Meyer empfohlen.

Wie ich schon auf der CSS-Reset-Seite geschrieben habe, diese Reset-Regeln sind nicht in Stein gemeißelt. Sie sind ein Anfang.

Crafting Ourselves (engl.) – Eric Meyer (meyerweb.com)

Ein Framework und/oder CSS-Resets zu verwenden, kann Ihnen dabei helfen, Ihre Dateien schlank zu halten. Beides sollten Sie aber nicht so verwenden, wie sie sind. Die Framework- und Reset-Dateien zu stutzen kann die Lesbarkeit und Wartbarkeit Ihrer CSS-Dateien noch weiter erhöhen.

5. Machen Sie Ihr CSS zukunftssicher

Doug Bowman's stopdesign.com CSS reveals specially crafted selectors used for layout
Doug Bowmans stopdesign.com-CSS enthält spezielle Selektoren für das Layout.

Ein anderer Weg, CSS zu optimieren, ist die Trennung der layout-spezifischen Deklarationen vom Rest. Ich habe auch schon davon gehört, dass einige, Typografie und Farben von Layout-Deklarationen trennen. Mit dieser Praxis konnte ich mich nie anfreunden. Ich mag es nicht so gerne, Selektoren zu wiederholen, nur um verschiedene Deklarationstypen mit ihnen zu assoziieren.

Allerdings kann ich mich dafür erwärmen, Layout-Regeln von anderen Regeln zu trennen, indem man das Layout in eine separate Datei auslagert oder wenigstens einen Teil der CSS-Datei nur für das Layout reserviert. Dies wird in “Transcending CSS″ von Andy Clarke empfohlen. In diesem Buch erinnert uns Clarke auch an das Folgende:

Reine CSS-Layouts waren schon immer ein Kompromiss. Die aktuellen CSS-Spezifikationen waren nie dazu gedacht, grafisch aufwändige und komplexe Benutzerschnittstellen zu erstellen, die das moderne Web heute erfordert. Die aktuellen Methoden — Floats und Positionierung — waren nie als Layoutwerkzeuge gedacht.

Transcending CSSAndy Clarke.

Ein Weg, diese Sätze zu interpretieren, ist, Floats und Positionierung mit CSS als, nun ja, Layout-Hacks anzusehen. Auch wenn wir keine echte Alternative zu diesen Hacks haben, wird es in Zukunft hoffentlich einen Standard dafür geben, den die Browser unterstützen. Wenn das eintrifft, sollte es ein Leichtes sein, die Box-Model-Hacks gegen solche CSS-Regeln auszutauschen, die für das Layout gedacht sind. Es wird allerdings noch eine Weile dauern, bis es soweit ist. Aber dann werden richtige Layout-Eigenschaften zu leichteren Websites führen und wir müssen keine Löcher mehr in unvollständigen CSS-Spezifikationen umschiffen.

6. Dokumentieren Sie Ihre Arbeit

David Shea's markup guide at mezzoblue.com
Der Markup-Guide (engl.) von David Shea zeigt, wie HTML-Tags richtig eingesetzt und wie sie auf seiner Website mezzoblue.com (engl.) angezeigt werden. Auch Websites ohne dynamisches HTML können diese simple und effektive Dokumentation als Grundlage verwenden.

In einem Team ist es sehr wichtig, dass sich Designer regelmäßig über Einführung und Einsatz von Design-Regeln austauschen, damit sie ein konsistentes Design über die gesamte Website hinweg erreichen. Wenn beispielsweise ein Designer HTML für ein Tab-Interface einer Website entwerfen will, kann das Lesen der Dokumentation verhindern, dass diese Arbeit doppelt gemacht wird und HTML sowie CSS dadurch aufgebläht werden.

Dokumentation, HTML- und CSS-Dokumentation eingeschlossen, sind nicht nur im Team, sondern auch für Einzelkämpfer wichtig. Eigene Projekte können nach einem Jahr Arbeit an anderen Projekten wie das Werk eines anderen aussehen. Ihr zukünftiges Ich könnte vielleicht Hinweise darauf nett finden, wie das CSS-Grid funktioniert oder welche Seiten bereits einen zweiten Form-Button haben. Es wird Ihnen oder anderen ersparen, unnötige oder überflüssige Dinge in die CSS-Dateien zu schreiben.

Dokumentation hat den positiven Nebeneffekt, dass man dort nähere Erklärungen unterbringen kann, die anderenfalls direkt in die CSS-Dateien geschrieben werden müssten. CSS-Kommentare sind nützlich, um große CSS-Dateien zu unterteilen. Lange Kommentare würden die Dateigrößen anschwellen lassen und sind wahrscheinlich sowieso in der Dokumentation besser aufgehoben. Trotzdem sind ausführliche Erklärungen direkt in der CSS-Datei auf jeden Fall besser als gar keine Dokumentation. Sie in eine separate Dokumentation zu schreiben, ist ein sehr guter Weg, CSS-Dateien klein zu halten.

7. Komprimieren Sie

Es gibt einige sehr schöne Anwendungen, die CSS für Sie optimieren und komprimieren. Sie ermöglichen Designern, eine für Menschen lesbare Arbeitskopie zu verwenden und gleichzeitig eine Browser-freundliche Version produktiv einzusetzen, die nur einen Bruchteil so groß ist wie die Arbeitskopie. Programme wie CSSTidy und YUI Compressor können unnötigen Whitespace entfernen, redundante CSS-Deklarationen aufspüren und entfernen und ausführliche Deklarationen in CSS-Kurzschrift dort umwandeln, wo Sie es vielleicht vergessen haben.

Beliebte Text-Editoren wie BBEdit, TextMate und TopStyle können ebenfalls helfen, CSS-Dateien nach Ihrem Geschmack zu formatieren. Es gibt sogar die Möglichkeit, mit PHP fertig gezippte Versionen von CSS-Dateien zu erzeugen. Noch mehr CSS-Kompressoren und -Optimierer finden Sie im Artikel List of CSS Tools (engl.) im Smashing Magazine.

Wichtig zu erwähnen ist noch, dass diese Programme gut, aber nicht immer perfekt funktionieren. CSS-Hacks können Probleme machen — ein weiterer Grund, diese Hacks in spezielle Dateien auszulagern.

Ein anderes Programm zur Optimierung von CSS-Dateien möchte ich erwähnen. Es ruft alle Seiten einer Website auf und protokolliert, welche CSS-Regeln und Deklarationen nicht genutzt werden und zeigt sie als Liste an. Unglücklicherweise gibt es dieses Programm noch nicht. Für ein solches Programm würde ich aber gerne Geld bezahlen.

Mehr als einmal habe ich davor zurückgeschreckt, CSS-Deklarationen zu löschen, weil nirgendwo dokumentiert war, dass sie Überbleibsel aus der Entwicklung sind. Wenn ein Programm diese Regeln auflisten könnte, wäre das hilfreich, CSS-Dateien zu warten und zu verkleinen.

Fazit

Sauberer und optimierter Code führen nicht nur zu kleineren CSS-Dateien, sondern auch zu besserer Wartbarkeit und Lesbarkeit der Dateien. Die hier vorgestellten Prinzipien gelten nicht nur für CSS, sondern können auch auf HTML, Javascript und andere Programmiersprachen angewendet werden. CSS-Dateien stehen zwar nicht im Vordergrund wie die Darstellung einer Website beim Benutzer. Trotzdem können Benutzer durch schnellere Ladezeiten und auch Entwickler durch saubereren Code gleichermaßen von CSS-Optimierung profitieren. Wenden Sie diese Prinzipien auf Ihre aktuellen und zukünftigen Projekte an, Sie werden es sicher nicht bereuen.

Über den Autor

Tony White betreibt die Einmann-Show Ask the CSS Guy (engl.), ein Feierabend-Blog über CSS, Javascript und Webdesign. Er lebt in Memphis, Tennessee, USA. ™

Hat Dir der Artikel gefallen?

Dr. Web bietet Dir einen kostenlosen Zugang zu weiteren 6.500 Beiträgen.

Bitte helfe mit, dass Dr. Web auch weiterhin kostenlos für alle ist.

Du hast die Wahl:

5 Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.