CSS: In der Kürze liegt die Würze

Vor wenigen Tagen las ich bei csswizardry.com den Blogartikel "Cyclomatic Complexity: Logic in CSS". Darin beschreibt Autor Harry Roberts die eigentlich simple Programmlogik von CSS. Wie jetzt? CSS ist doch keine Programmiersprache, sondern lediglich eine Gestaltungssprache. Wie kann denn da überhaupt eine Logik vorhanden sein? Ich lege doch nur die Formatierung von Elementen fest. Das ist richtig, jedoch zu behaupten CSS hätte keinerlei Logik, wäre grundlegend falsch.

Einfaches Beispiel:

div#header .header-pic img {...}

So und schon haben wir eine logische Abfolge. Denn auf Bilder, innerhalb der Klasse header-pic in der ID header, die an einen Div-Container gekoppelt ist, werden die Eigenschaften angewandt. Dieses einfache Beispiel zeigt aber noch etwas anderes. Warum machen wir uns das Leben manchmal so schwer und bauen solche Logik-Kaskaden? Harrys Artikel regt durchaus zum Nachdenken an. Braucht es unbedingt umfangreiche Entwicklungsumgebungen oder gar CSS-Präprozessoren?

Ich möchte diese Systeme keinesfalls schlecht reden. Bei größeren Projekten machen sie sicherlich Sinn. Allerdings bleibt die Frage nach dem Einsatzzweck. In erster Linie sollte man CSS so einfach wie nur möglich schreiben. CSS glänzt out of the box durch eine unwahrscheinliche Modularität, wenn man sie anzuwenden weiß.

Beispielsweise könnte das obige Beispiel folgendermaßen aussehen:

.header-pic {...}

Damit kann die Klasse überall und jederzeit losgelöst von irgendwelchen Einschränkungen im Dokument frei genutzt werden. Egal, ob diese auf ein Bild, einen Div-Container oder ein anderes Objekt angewandt wird. Das spielt keine Rolle. Präprozessoren können meiner Meinung nach nur dazu dienen, um diese Modularität weiter auszubauen. Also durch die Verwendung von Variablen und Funktionen, damit bestimmte Werte schnell änderbar sind.

Keep Things Simple (Quelle: gdsteam, Liz. CC BY 2.0)
Keep Things Simple (Quelle: gdsteam, Liz. CC BY 2.0)

Ich sehe es häufiger, dass manch einer sein CSS viel zu komplex gestaltet. Damit schränkt er sich bereits im Designprozess selbst ein. Deshalb ist es ratsam, die Komplexität zu mindern und die Strukturen flach zu halten. Dadurch behält man einerseits den Überblick und bleibt andererseits flexibel. Manchmal hilft auch der Blick in einen Styleguide.

Also cool bleiben und keep it simple!


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare – Schreib mir deine Meinung!

Fülle bitte die nachstehenden Felder aus. Angaben mit einem Sternchen sind Pflichtangaben. Deine E-Mail-Adresse wird nicht veröffentlicht.