CSS optimieren: Welche Möglichkeiten gibt es?

8. Oktober 2013 · Kategorien: CSS Stylesheets, Webentwicklung

CSS optimieren

CSS-Stylesheets. Das sind riesige Dateien zahlreicher Zeilen redundanten Codes. Richtig?
Leider oft schon. Obwohl es Möglichkeiten gibt, auch hier Ordnung und Struktur reinzubringen und damit CSS zu optimieren.

Warum ist CSS oft so unsauber?

Nun, dafür gibt es sicherlich mehrere Gründe.

Zum einen bietet die Sprache von Natur aus nicht viele Möglichkeiten zur Strukturierung:
Variablen und Funktionen gibt es nicht, Verschachtelungen von Styleanweisungen sind ebenfalls nicht möglich. Entwicklungsumgebungen, die in Sprachen wie PHP, Ruby und Python hilfreiche Vorschläge bereits existierender Klassen und Funktionen geben, liefern bei CSS maximal noch ein AutoComplete sämtlicher Styles. Wie soll es auch anders sein? In CSS gibt es keine Gruppierungen wie Namespaces oder Klassen. Im Normalfall gibt es eine große Datei, die sämtliche Stylesheets beinhaltet, die auf der gesamten Webseite und deren Unterseiten genutzt werden.

Keine einfache Sache also!
Dennoch gibt es einige hilfreiche Tools, die etwas Licht ins Dunkel… oder Ordnung ins Chaos bringen können.

Bootstrap

Von den Machern von Twittern entwickelt, kann man Bootstrap als eine Ansammlung hilfreicher CSS-Styles verstehen, die der Erfahrung nach oft gebraucht werden.
Das führt dazu, dass Deine eigene CSS-Datei kleiner wird, da viele Styles aus Bootstrap verwendet werden können.
Besonders beliebt ist Bootstrap, weil damit die Erstellung von responsive Websites erleichert wird. Also Websites, die auf jedem Gerät (Smartphone, Tablet, Desktop) gut aussehen.

Möchtest Du mit Bootstrap dein CSS optimieren, kannst Du es hier herunterladen:
http://getbootstrap.com

Less

Less ist im Grunde genommen eine eigene Stylesheet-Sprache, die den geschriebenen Code automatisch in CSS umwandelt. Die Syntax von Less ist identisch zu CSS, allerdings gibt es ein paar zusätzliche, sehr hilfreiche, Möglichkeiten.
So könnt ihr Variablen verwenden, die ihr dann in mehreren Styles verwendet. In einer Variable kann zum Beispiel eine Farbe gespeichert sein. Wenn Du Dich später dafür entscheidest, dass Du von rot auf grün wechseln möchtest, musst Du lediglich eine Zeile ändern.
Ebenso erlaubt Less die Verschachtelung von Styles. Das sieht dann zum Beispiel so aus:

#content {
  h1 {
    color: red;
  }

  h2 {
    color: green;
  }
}

Das bedeutet, Du kannst im Beispiel sämtliche Klassen, die innerhalb von #content gelten sollen, in den #content-Block schreiben. Das spart ein wenig Schreibarbeit und führt zu einer besseren Struktur.

Du kannst Less hier herunterladen:

http://lesscss.org

CSS optimieren mit dem CSSO – CSS Optimizer

Um den fertigen CSS-Code zu minimieren, gibt es zahlreiche Online-Tools. Ein relativ unbekanntes, aber besseres Tool ist der CSS Optimizer von bem:
Nicht nur, dass es Leerzeichen, Kommentare und andere unnötige Zeichen entfernt. Es verbindet auch Blöcke gleicher Selektoren sowie identischen Eigenschaften und verkürzt bestimmte Ausdrücke (zum Beispiel margin, padding, background usw.)

Eine vollständige Liste der Vorteile, die euch das Tool bietet, findest Du auf der Webseite:

http://bem.info/tools/csso/

Planung und Absprache

Du solltest Dir vorher überlegen, wie Du Deinen HTML-Code aufbaust und welche Klassen du aller Voraussicht nach brauchen wirst. Im Team solltest Du dich regelmäßig mit deinen Kollegen absprechen, wie die Struktur sein sollte, wann wo welche Styles verwendet werden und über Änderungen informieren.
Wenn jemand einen neuen Styleblock hinzufügen möchte, existiert bereits schon oder kann mit einem anderen verknüpft werden.

Autor: | Kategorien: CSS Stylesheets, Webentwicklung

Keine Kommentare zu CSS optimieren: Welche Möglichkeiten gibt es?

Hinterlasse eine Antwort

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