CSS organisieren und aufräumen

Bei Änderungen im Layout wären wir gern ein Sherlock Holmes und folgen Spuren und Hinweisen, aber wir tappen stundenlang im Dunkeln. Wie kann man CSS strukturieren, organisieren und aufräumen, damit die CSS-Datei ein Jahr und drei Erweiterungen später noch durchschaubar ist? Welche Mittel halten die CSS-Ladezeit im Zaun?

Der Abstand des Inhalts vom Rand der Seite fällt unterschiedlich aus, aus dem Nichts erscheinen Rahmen, Zeilenhöhen weichen voneinander ab und die Schriftgrößen sind nicht in allen Browsern gleich. Der eine Browser legt einen blauen Rahmen um aktive Formularfelder und um Bilder in a-Tags: Ein CSS-Reset entfernt die vorgegebenen Stile der Browser, so dass die Browser-Stile nicht mehr dazwischenfunken.

CSS Header

Die CSS-Datei beginnt mit einer kurzen Beschreibung des Themes.

/*******************************************************
*
Theme Name:
Theme URI:
Description:
Version:       1.0
Author:        Emma Watson
License:       none (public domain)
Tags:          CSS Normalisierung und Organisation, 4 Spalten, Streifen in voller Breite, responsiv
*
*******************************************************/

Die universellen Regeln oder die Normalisierung bilden den Anfang der CSS-Datei, damit sie später von individuellen Stilen überschrieben wird.

CSS-Reset

Ein CSS Reset sollte in erster Linie die notorisch inkonsistenten Browser auf eine Linie bringen. CSS-Resets gibt es in unzähligen Ausführungen und wir finden sie in vielen Templates von WordPress, Drupal und anderen CMS. Die meistgenutzten Resets sind

• normalize.css
• Eric Meyer Reset CSS 2.0

normalize.css ist weniger ein Reset als eine Normalisierung, die für eine bessere Cross-Browser-Konsistenz sorgt. Die sinnvollen Defaults bleiben erhalten. Das Projekt ist in unabhängige Bereiche unterteilt, damit die Normalisierung einzelner Module (z.B. form) ausgenommen werden kann, wenn sie nicht gebraucht werden.

Auf der anderen Seite erhöht ein CSS-Reset die Ladezeit der CSS-Datei und bringt Redundanz ins CSS, denn viele der zurückgesetzten Stile werden später überschrieben.

Mehr zum CSS Reset

Brauchen wir noch ein CSS Reset? Basisregeln!

Heute müssen Layout und Typographie nicht mehr in jedem Browser pixelperfekt herüberkommen. Die modernen Browser haben sich einander gut genähert, dazu spannen die unterschiedlichen Monitorgrößen eine unendliche Vielfalt auf. Vielen routinierten Webdesignern reicht ein kleiner Fundus von universellen Basis-Regeln. Als Basis-Regeln gelten nur einfache Selektoren wie table, p, a, img, h1, h2, … – Klassen und ID-Selektoren gehören nicht zu den Basis-Regeln.

* {
    box-sizing: border-box;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
th, td {
    text-align: left;
    vertical-align: top;
}
img { border: 0; }

CSS reset – was ist heute noch sinnvoll?

Inhaltsverzeichnis für die CSS-Datei

Ein Inhaltsverzeichnis für CSS-Stile organisiert die CSS-Datei, macht sie besser lesbar und reduziert die Suche nach bestimmten Stilen.

1. CSS Reset und universelle CSS-Regeln
2. Farben
3. Above the fold – Stile für die Elemente, die ohne Scrollen beim Laden der Seite sichtbar sind
4. Main Content
5. Sidebar Content
6. Widgets / Blocks Content
7. Footer Content
8. Kommentare und Formulare

CSS-Variablen als Helfer einsetzen

Während der Entwicklung wechseln die Farben oder Nuancen häufig. Heute setzen wir während der Entwicklung CSS-Variablen ein – dann lassen sich Farben leichter ersetzen. Während der Entwicklung lohnen sich HSL-Farben, denn HSL ist besser »lesbar« als Farben in Hexcodes.

:root {
  --me-color: hsl(350,50%,50%);
}
.top-menu h1 {
  color: var(--me-color);
}

CSS Kommentare

Auch wenn wir uns in der CSS-Datei während der Entwicklung wie zuhause fühlen: Ein Jahr und vier Erweiterungen später haben wir nur noch wenige Regelsätze der alten CSS-Datei im Kopf.

body {
    font-size: 104%;
    color: HSL(6,50%,40%);   /* Dunkelrot  */
}
/* Einzeilige Kommentare werden schnell übersehen */
/*****    Das ist ein Kommentar auf einer Zeile    *****/
/*******************************************************
*
    Mehrzeiliger Kommentar
*
*******************************************************/

Breakpoints organisieren

Übergangspunkte oder Breakpoints sitzen am besten auf der Grundlage der Inhalte und nicht auf physikalischen Auflösung der Geräte.

Ein sinnvoller Aufbau der CSS-Datei beginnt mit den kleinsten Monitoren und arbeitet sich Breakpoint für Breakpoint zu den großen Monitoren hoch. Das bereitet den mobilen Geräten die geringste Last und organisiert gleichzeitig die CSS-Datei.

/** Universelle Stile für alle Monitorgrößen **/
body { … }
@media all and (min-width: 50em) { /** ab 800px **/
body { … }
}

Nicht jeder Breakpoint muss gleich einen vollständigen Layout-Umbruch mitbringen. Sanfte kleine Umbrüche passen z.B. nur einige Schriftgrößen an, ändern die Laufweite oder den Zeilenabstand.

Breakpoint während der Entwicklung anzeigen

Ein kleines Javascript hält die Breakpoints während der Entwicklung im Auge und zeigt die Breite des Browserfensters an. Wenn die Seiten online gehen, wird das Script wieder entfernt.

<script>
window.onload = function () {
    // Anfängliche Breite des Browserfensters
    var iWidth = window.innerWidth;
    var div = document.createElement('div');
    var body = document.querySelector('body');
    body.insertBefore(div,body.childNodes[0]);
    div.setAttribute('style','position:fixed')
    div.innerHTML = iWidth;
    window.onresize = function (evt) {
        iWidth = window.innerWidth;
        div.innerHTML = iWidth;
    }
}
</script>

Einzelfälle für spezielle Seiten

Für WordPress und Drupal gibt es Plugins bzw. Module, die CSS-Regeln für einzelne Seiten einbinden. Dann muss die CSS-Datei nicht durch Lösungen für Einzelfälle überfrachtet werden – die CSS-Datei bleibt aufgeräumt.

CSS minifizieren

Am Ende der Entwicklung soll die CSS-Datei nicht mehr von unnötigen Kommentaren und Zeilenumbrüchen aufgeblasen werden. Eine einfache Regel ist:

• CSS-Regeln mit nur einer Anweisung werden in einer Zeile geschrieben
• mehrzeilige Regeln werden in einzelne Zeilen geschrieben
• Langatmige Kommentare kürzen
• Farben in RGB oder HEX schreiben

csscss prüft die CSS-Datei auf Redundanz.

Helium CSS sucht nach ungenutzten CSS-Deklarationen.

Für den Produktionseinsatz wird die CSS-Datei minifiziert. Online-Tools zum Minifizieren sind z.B. CSS minify und CSS compressor. Das Original bleibt, die minifizierte CSS-Datei wird in das Theme eingebunden.