molily Navigation

Komplexe Stylesheets strukturieren mit Sass Placeholder Selectors

Schon seit 2005 erscheint der Webkrauts-Adventskalender mit jährlich 24 hochkarätigen Fachartikeln zur Webentwicklung. Bereits im letzten Jahr habe ich einen zweiteiligen Artikel beigetragen, der den CSS-Präprozessor Sass und die zugehörige Bibliothek Compass vorstellt:

Seit letztem Jahr wurde der Sass-Compiler signifikant weiterentwickelt und verbessert. Besonders ein Feature hat in meinen Projekten einen Paradigmenwechsel eingeläutet. Mit der Sass-Version 3.2 wurde die Möglichkeit, von bestehenden Regeln mittels @extend abzuleiten, durch ein enorm nützliches Feature ergänzt: Die sogenannten Placeholder Selectors (Platzhalter-Selektoren). Damit lässt sich Modularisierung und Code-Wiederverwendung elegant im SCSS-Code umsetzen.

Ich stand dem populären Konzept zur CSS-Modularisierung, OOCSS, immer kritisch gegenüber. Die Erfinderin, Nicole Sullivan, hat die Probleme von umfangreicher CSS-Entwicklung gut erkannt und erstrebenswerte Ziele zur Modularisierung formuliert. Lediglich die Umsetzung in praktische Regeln hat mich (und viele andere) gestört.

Verschiedene Stimmen raten nun dazu, die Ideen von OOCSS mit @extend und Placeholder Selectors umzusetzen. Anstatt unzählige rein präsentationsbezogene Klassen im HTML zu setzen, wie es sowohl Grid-Frameworks als auch Baukastensysteme wie Twitter Bootstrap nahelegen, werden interne Grundmodule nun mit Placeholder Selectors definiert und in konkreten Regeln per @extend angewendet.

Im diesjährigen Webkrauts-Adventskalender stelle ich das neue Feature der Placeholder-Selectors genauer vor. Viel Spaß beim Lesen!

CSS-Modularisierung mit Sass: Komplexe Stylesheets strukturieren