xCSS – Objektorientiertes CSS (Eine kurze Einleitung)

Wer viel CSS schreibt kennt das Problem.. Viele Definitionen wiederholen sich immer und immer wieder und man verliert leicht die Übersicht.

Wäre Praktisch wenn man Variablen zur Verfügung hätte oder sogar Vererbung von anderen Klassen möglich wäre oder?

Alles möglich dank xCSS.

First CSS framework that allows you to work object-oriented and keeps your workflow as “DRY” as possible

xCSS ist ein Framework welches erlaubt normales CSS zu schreiben jedoch mit den Möglichkeiten:

• Variablen zu definieren
• Eigenschaften von Klassen zu vererben
• Mathematische Operationen zu schreiben
• Elemente mit dem selben Selektor zu gruppieren

Die Vorteile welche aus diesen Möglichkeiten entstehen sind:

• sauberes CSS (was sehr viel Wert ist)
• das CSS wird einfacher zu Warten und Erweitern
• minimierter CSS Output (wenn gewünscht)

Wie funktioniert das?

Grundsätzlich: Es wird xCSS geschrieben und daraus wird CSS generiert und nicht umgekehrt.

Als erstes muss man sich natürlich die aktuellste Version von xCSS hier runterladen. Als zweites muss das Packet entpackt und auf den Server in das CSS Verzeichnis geladen werden (Beispiel der Ordnerstruktur). Danach muss die Konfiguration bearbeitet und einige Pfade angepasst werden. Hat man das gemach muss man Javascript file im Header seiner Webseite platzieren und seine Seite aufrufen. Bei diesem Aufruft wird mittels dem eingebundenem Javascript das eigentliche xCSS PHP-Skript aufgerufen und das xCSS in normales CSS umgewandelt. Kling komisch, ist aber so. Hier der Link zu offiziellen Anleitung.

Nachdem man die Seite einmal aufgerufen hat und das CSS generiert wurde sollte man dieses eingebundene Javascript einkommentieren oder aus der Datei löschen da sonst bei jedem Seitenaufruf alles neu generiert wird.. diese Vorgehensweise stört mich und scheint mir nich so “state of the art” zu sein.
Ich empfehle eine passwortgeschütze Seite mit dem JS zu erstellen und diese jeweils auszurufen statt den Tag immer ein- und auszubauen.

Beispiele

Hier noch einige Beispiele um die Funktionsweise und Möglichkeiten von xCSS besser zu verstehen.

Variablen

xCSS

1
2
3
4
5
6
7
8
9
10
11
12

vars {
    $path = /img/sprite;
    $color = #FFCC00;
    $color2 = #000000;
    $border = border-top: 1px solid $color;
}
.errormessage {
    background-image: url($path/icons.gif);
    background-color: $color2;
    $border;
    color: $color;
}

CSS

1
2
3
4
5
6

.errormessage {
    background-image: url(/img/sprite/icons.gif);
    background-color: #000000;
    border-top: 1px solid #FFCC00;
    color: #000000;
}

Bei grossen Webseiten mit vielen Elementen ein Timesaver erster Klasse :)

Vererbung

Mein Lieblings-Funktion ;)

xCSS

1
2
3
4
5
6
7
8
9

.alert {
    	padding: 20px;
}
.notice extends .alert {
	background-color: green;
}
.error extends .alert {
	background-color: red;
}

CSS

1
2
3
4
5
6
7
8
9
10
11

.error,
.notice,
.alert {
	padding: 20px;
}
.error {
	background-color: red;
}
.notice {
	background-color: green;
}

Wie man unschwer erkennen kann wird mit xCSS nicht weniger geschrieben als mit üblichem CSS jedoch ist der Code schöne und einfacher zu erweitern und zu lesen.

Selbstverständlich können Eigenschaften überschrieben werden. Bei überschreiben von Eigenschaften wird immer die letztere verwendet.

Mathematische Operationen

Sorry.. aber hier für finde ich leider keine Verwendung. Mahr dazu aber im Fazit ganz unten.

Gruppierung

Das wohl am meisten verwendete Funktion.

xCSS

1
2
3
4
5
6
7
8
9
10
11

.sharelist {
    ul {
        list-style: none;
    }
    li {
        padding: 10px;
    }
    a {
        color: blue;
    }
}

CSS

1
2
3
4
5
6
7
8
9

.sharelist a {
	color: blue;
}
.sharelist li {
	padding: 10px;
}
.sharelist ul {
	list-style: none;
}

Einfacher zu lesen, einfach zu erweitern und sehr aufgeräumt. Nur Vorteile oder? :)

Fazit

Ich glaube es gibt bestimmt bessere Lösungen als den benötigten Javascript Code ein oder aus zu kommentieren nur um zu verhindern das das CSS neu generiert wird. Man könnte zB. auf den Zeitstempel der letzten Modifizierung einer CSS Datei zurück greifen und so bestimmen ob das CSS neu generiert werden soll. Des weiteren fällt mir momentan nicht ein wo ich die Mathematischen Operationen so wie sie momentan angeboten werden brauchen könnte. Wäre aber sicherlich von Nutzen wenn man Mathematische Operationen mit Browser-Abfragen kombinieren könnte um so zb. den IE6 Double-Margin Bug und andere IE Fehler elegant zu beheben. Ich hoffe das sowas in der nächsten Verion erhältlich sein wird (sonst mach ich es selber ;)).

Was mit auch sehr gefällt, ist die Möglichkeit den CSS-Output minimiert zu generieren um so die Ladezeit für die Datei zu verringern. Bis anhin habe ich für das minimieren von CSS & JS Dateien dieses kleine Tool verwendet.

Hier gibts übrigens einen “Online-Compiler” für xCSS.

Trotzdem der komischen Implementierung finde ich das ganze eine sehr tolle „Technik“ und werde diese „Technik“ in meinem nächsten #Geheimprojekt einsetzen da bis anhin jedes CSS bei mir nicht wirklich übersichtlich war. ( Auch nicht mit alphabetisch sortierten von Eigenschaften und einrücken von Blöcken und was es sonst noch alles gibt).