Am 24. Juni haben wir in der Scandio GmbH einen R&D Day durchgeführt. Trotz des massiven Projektdrucks haben wir uns mit der gesamten Mannschaft einen Tag Zeit genommen und in verschiedenen Sessions unser Know-how und vor allem unsere Sichtweise auf die Projekte erweitert. Technik und Hands on standen dabei im Vordergrund. In einer Session ging es um professionelle CSS Entwicklung. Gerade in der Entwicklung von modernen webbasierten Applikationen sind CSS Eigenschaften und deren Selektoren wichtige Elemente.

Über eine Diskussion sind wir dabei auf CSS Generatoren gekommen und da der Tag schon fast vorbei war, habe ich mir einen dieser CSS Generatoren etwas genauer angeschaut.

Was ist das grundsätzliche Problem?

In CSS Styles werden viele Eigenschaften und deren Werte of wiederholt. Farben, Rahmen, Hintergründe werden nicht einmal definiert, sondern redundant. Weiterhin können Eigenschaften, die zusammen auftreten, nicht zu einer “Meta”-Eigenschaft verbunden werden. Hier einige Beispiele für die eigentliche Problemstellung.

p {
color: #515151;
}
h1 {
background-color: #515151;
color: #FEFEFE;
}
aside {
border: 1px solid #515151;
}

Wie unschwer zu erkennen ist, werden Farben redundant verwendet. Die Änderung einer Farbe dauert lange, insbesondere dann, wenn das Projekt so groß ist, dass die CSS Dateien gesplittet wurden.

Ein weiteres Beispiel behandelt die Browser-spezifischen Style-Eigenschaften.

#my-box {
	font-size:16px;
	border; 1px solid #515151;
	-moz-box-shadow: 2px 2px 4px #DDDDDD;
	-webkit-box-shadow: 2px 2px 4px #DDDDDD;
	box-shadow: 2px 2px 4px #DDDDDD;
}
#footer-box {
	font-size:10px;
	border; 1px solid #515151;
	-moz-box-shadow: 1px 2px 4px #515151;
	-webkit-box-shadow: 1px 2px 4px #515151;
	box-shadow: 1px 2px 4px #515151;
}

Von diesen Beispielen gibt es viele. Auch die Kaskadierung von Style-Elementen ist äußerst schreibintensiv. Wie sieht das ganze nun mit einem Generator aus und welchen Möglichkeiten werden zusätzlich angeboten?

Am Beispiel von LESS kann man die Möglichkeiten sehr gut erläutern. LESS bietet Variablen, Kaskadierungen, Mixins , Mixins mit Parametern und vieles mehr an. Mit Variablen kann man auch rechnen. Redundante Elemente können eliminiert werden. Hier der zugehörige LESS Source für die oben aufgeführten Beispiele.

/* Variables */
@darkColor: #515151;
@brightColor: #FEFEFE;
@shadowColor: #DDDDDD;
@baseSize: 16px;
@darkBorder: 1px solid @darkColor;
/* mixins */
.dark-border {
	border: @darkBorder;
	border-top:2px solid @darkColor;
}
.box-shadow(@h @v @b @c) {
	-moz-box-shadow: @h @v @b @c;
	-webkit-box-shadow: @h @v @b @c;
	box-shadow: @h @v @b @c;
}
/* styles */
p {
	color: @darkColor;
	font-size: @size;
}
h1 {
	background-color: @darkColor;
	color: @brightColor;
	font-size:@size*2;
}
aside {
	.dark-border;
}
#my-box {
	font-size:@size;
	.dark-border;
	.box-shadow(2px 2px 4px #DDDDDD);
}
#footer-box {
	font-size:@size-6;
	.dark-border;
	.box-shadow(1px 2px 4px @darkColor);
}
/* end */

So kann man mit ein wenig Übung sehr gut strukturierten CSS Code schreiben. Der Generator kann während der Entwicklung direkt eingebunden werden. Im Live-Betrieb sollte man bei hochfrequentierten Sites darauf verzichten. LESS Generatoren gibt es in fast allen Programmiersprachen wie Java, C#, PHP, Ruby und auf in JavaScript für den Browser bzw. node.js. Weitere Informationen gibt es bei Google und zum Beispiel hier: http://lesscss.org/

Was gibt es noch außer less? Sucht mal bei Google nach SCSS und SASS. Die Konzepte sind sehr ähnlich. Es gibt sogar Konverter.

Übrigens: Wir suchen auch im Frontend Bereich noch tatkräftige Unterstützung: Schaut doch mal auf die Job-Seite der Scandio.